The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
- 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.
Description
People who have color vision deficit will not be able to read the text if the text and its background do not have enough contrast. Web designers should ensure that the text and background have adequate contrast. The intention of this guideline is to help the people with color vision deficit read the content without the use of assistive technologies such as screen magnifiers or make specialized settings such as high contrast mode.
The minimum contrast ratio between the text and its background is 4.5:1 for standard font size. For large text the minimum contrast ratio is 3:1 between the text and its background.
What is large scale text?
Any text that has a font size of 18 point or a font size of 14 point bold is considered as larger text. Since large text and bold text will be easier for the users to read a minimum contrast of 3: 1 is considered sufficient.
Images of text
Providing the above mentioned minimum contrast between the text and its background is not an exception for images of text. If the text on images is an essential content or have a significant information that is conveyed to the user minimum contrast ratio should be maintained. If it is not possible, providing high resolution images is highly recommended.
What else?
To pass the color contrast at WCAG 2.0 level AAA, provide a contrast ratio of At least 7:1 for standard font size and4.5: 1 for large font size.
How to check for color contrast
Currently there are many free tools available to check the contrast ratio between the text and background.
Checking color contrast with hexadecimal values
If the hexadecimal values (RGB) are available use the following online color contrast checker by webaim.
Contrast Checker by Webaim (External website)
Click the above link. Just provide the hexadecimal values in foreground and background text fields. The contrast ratio will be calculated by the tool. If the minimum contrast ratio is failed the tool also gives the option to the designer allowing lighten or darken either foreground or background and revalidate until the colors pass at 4.5:1 for normal text and 3:1 for larger text.
Juicy Studio Color Contrast Checker (External website) is another online tool to check the contrast if you know the hexadecimal values.
If you don’t have the hexadecimal values of the colors extract them from Addons by Colorzilla (External website or test the web page online.
Checking color contrast for entire page
Wave 5 by Webaim (external website is an excellent tool to check the color contrast of any online webpage. Give the url of the web page you need to check for color contrast in the text field at Wave (External website) and click wave button. Now on the wave result page, click on contrast button. You will find all the contrast errors of the web page.
Checking the contrast for an offline file or a visual design
The color contrast analyzer tool can be used for checking the contrast of offline files, visual designs or even an online webpage. A tool was developed by JUn of the Web Accessibility Tools Consortium in collaboration with Vision Australia and Steve Faulkner of The Paciello Group (Europe) called color contrast analyzer. Download and use the tool from Vision Australia (External website). CCA by Vision Australia (External website) also has the links with instructions to use the tool.