Skip to content

Replace raster images with SVG in Understanding SC 1.4.11: Non-Text Contrast #4573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Replace raster images with SVG in Understanding SC 1.4.11: Non-Text Contrast #4573

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
622d8ae
initial commit
adampage Aug 22, 2025
e85780c
Merge branch 'main' into 4549-non-text-contrast-example-images
patrickhlauke Aug 22, 2025
566fb54
relocate and rename new svg assets, remove previous png assets
adampage Aug 23, 2025
9631fd2
replace checkbox, custom radio, and star rating assets
adampage Aug 23, 2025
e7a7eef
fix checkmark color
adampage Aug 23, 2025
ec502fe
replace checkbox, link, dropdown, and other assets
adampage Sep 26, 2025
c0d4209
replace inactive button asset in 3 Understanding docs
adampage Sep 26, 2025
172fee3
Merge remote-tracking branch 'upstream/main' into 4549-non-text-contr…
adampage Sep 26, 2025
1fa4558
add max-inline-size rule to avoid worsening Reflow issue
adampage Sep 30, 2025
2230310
Merge branch 'main' into 4549-non-text-contrast-example-images
adampage Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion understanding/20/contrast-enhanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ <h3>Inactive User Interface Components</h3>

<p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
<figure id="figure-grey-button-and-text">
<img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120">
{% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
<figcaption> An inactive button using default browser styles</figcaption>
</figure>
</section>
Expand Down
2 changes: 1 addition & 1 deletion understanding/20/contrast-minimum.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ <h3>Inactive User Interface Components</h3>

<p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
<figure id="figure-grey-button-and-text">
<img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120">
{% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
<figcaption> An inactive button using default browser styles</figcaption>
</figure>
</section>
Expand Down
9 changes: 9 additions & 0 deletions understanding/21/img/1.4.11-ntc-button-inactive.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed understanding/21/img/inactive-button.png
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion understanding/21/non-text-contrast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ <h4>Inactive User Interface Components</h4>

<p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
<figure id="figure-grey-button-and-text">
<img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120">
{% include "./img/1.4.11-ntc-button-inactive.svg" %}
<figcaption> An inactive button using default browser styles</figcaption>
</figure>
<p>Inactive components, such as disabled controls in HTML, are not available for user interaction. The decision to exempt inactive controls from the contrast requirements was based on a number of considerations. Although it would be beneficial to some people to discern inactive controls, a one-size-fits-all solution has been very difficult to establish. A method of varying the presentation of disabled controls, such as adding an icon for disabled controls, based on user preferences is anticipated as an advancement in the future.</p>
Expand Down