Difference between revisions of "WCAG 1.4.3 Contrast (Minimum)"
Jump to navigation
Jump to search
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
[[ | From [[How to Meet WCAG 2.1]] by the [[World Wide Web Consortium (W3C)]]. | ||
<blockquote> | |||
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: | |||
* '''Large Text:''' Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; | * '''Large Text:''' Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; | ||
* '''Incidental:''' Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. | * '''Incidental:''' Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. | ||
* '''Logotypes:''' Text that is part of a logo or brand name has no minimum contrast requirement. | * '''Logotypes:''' Text that is part of a logo or brand name has no minimum contrast requirement. | ||
</blockquote> | |||
On that last one I wish to point out that if people can't make out what's in your logo, it's a pretty crappy logo. There may be no requirement but don't be an idiot. You want that thing to be recognizable on a poorly-lit billboard in the rain at 70 miles per hour, and that means use some freakin' contrast. | On that last one I wish to point out that if people can't make out what's in your logo, it's a pretty crappy logo. There may be no requirement but don't be an idiot. You want that thing to be recognizable on a poorly-lit billboard in the rain at 70 miles per hour, and that means use some freakin' contrast. | ||
[https://www.24a11y.com/2017/color-contrast-beyond-basics/ Color Contrast, Beyond the Basics] by Beth Raduenzel is a great article about why color contrast is important and also covers why you should underline your goddamned links. | [https://www.24a11y.com/2017/color-contrast-beyond-basics/ Color Contrast, Beyond the Basics] by [[Beth Raduenzel]] is a great article about why color contrast is important and also covers why you should underline your goddamned links. | ||
== Related Guidelines == | == Related Guidelines == | ||
1.4.6 Contrast (Enhanced) - Level AAA ratchets the guidelines above up to a ratio of 7:1. | [[WCAG 1.4.6 Contrast (Enhanced)]] - Level AAA ratchets the guidelines above up to a ratio of 7:1. | ||
== Tools to help meet this guideline == | == Tools to help meet this guideline == | ||
* [https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333 Color Contrast Check] by snook.ca | * [https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333 Color Contrast Check] by [[snook.ca]] | ||
== Additional Resources == | == Additional Resources == | ||
* [https://stephaniewalter.design/blog/tips-create-accessible-color-palette/ Tips for creating an accessible color palette] by Stéphanie Walter | * [https://stephaniewalter.design/blog/tips-create-accessible-color-palette/ Tips for creating an accessible color palette] by [[Stéphanie Walter]] | ||
* [https://medium.com/confrere/automatically-creating-an-accessible-color-palette-from-any-color-sure-e735c3f2f45e Automatically creating an accessible color palette from any color? Sure!] | * [https://medium.com/confrere/automatically-creating-an-accessible-color-palette-from-any-color-sure-e735c3f2f45e Automatically creating an accessible color palette from any color? Sure!] | ||
* [https://blog.interactivethings.com/how-we-created-color-scales-ad690eaf3187 How we created color scales] | * [https://blog.interactivethings.com/how-we-created-color-scales-ad690eaf3187 How we created color scales] | ||
[[Category:1.4 Distinguishable]] | |||
Latest revision as of 19:57, 29 July 2020
From How to Meet WCAG 2.1 by the World Wide Web Consortium (W3C).
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
On that last one I wish to point out that if people can't make out what's in your logo, it's a pretty crappy logo. There may be no requirement but don't be an idiot. You want that thing to be recognizable on a poorly-lit billboard in the rain at 70 miles per hour, and that means use some freakin' contrast.
Color Contrast, Beyond the Basics by Beth Raduenzel is a great article about why color contrast is important and also covers why you should underline your goddamned links.
Related Guidelines
WCAG 1.4.6 Contrast (Enhanced) - Level AAA ratchets the guidelines above up to a ratio of 7:1.