1.4.3 Contrast (Minimum)

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.

8 Comments to "1.4.3 Contrast (Minimum)"

  1. November 27, 2013 - 11:10 pm | Permalink

    Another useful tool for checking colour contrast is the Colour Contrast Analyzer from the Paciello Group. It’s downloadable, and is available for Windows and Macs.

    This is the tool that I use when accessibility testing as it’s got a useful colour picker tool so you don’t need to key in the hex values (although you can if you want to). It also gives you immediate feedback as to whether the colour contrast satisfies the WCAG2.0 requirements.

  2. November 29, 2013 - 6:32 am | Permalink

    We are working on a contrast specification for signs, stair striping symbols and pictograms, and detectable warning surfaces (all aspects of the built environment), for the American National Standards Institute (ANSI) A117.1 Committee. We are using the common minimum dark/light contrast of 70 percent, and are measuring according to Light Reflectance Values (LRV). This is more appropriate for architectural finishes than the ratios and measurements used for web design and digital prints.

    Many people do not understand that contrast cannot take hue (“color”) into account, because it is actually the dark to light difference that matters for people who may not be able to see the colors or hues at all. For instance, red on black may appear as a dark gray on black. Red and green may appear as virtually identical shades of gray. Magenta and blue/green may also appear as shades of gray.

    What we need now is a reasonable inexpensive and accurate instrument with a very small aperture that can measure letters and backgrounds on signs on site. At this time, we have to depend on testing materials at the point of fabrication.

    Of course lighting has a tremendous amount to do with the ability to read signs, and all signs become “invisible” in the dark. However, if we at least start out with contrasting materials, then, in good lighting, the signs may be more usable by more people.

    • December 3, 2013 - 10:01 pm | Permalink

      Sharon: Thanks for an interesting comment from the world of built environments. I’ve noticed that with steps covered with eye-boggling patterned carpets, it’s difficult to tell where one ends and the next begins. I suspect that carefully watching them while using the steps can induce vertigo.

      – Kate

      PS: There’s a typo in your name link; it resolves to accesscommconsuting, and I imagine it should be http://www.accesscommconsuting.com

  3. November 29, 2013 - 10:50 pm | Permalink

    Please change the blog template so it passes the tests itself. It is no good talking about minimum levels of colour contrast if the blog post fails.

    Areas that fail on this page:
    1) “The visual presentation of text…” – text #888888 – contrast ratio with #ffffff background is 3.54:1
    2) “Written by Rakesh Paladugula…” – text #999999 – contrast ratio 2.85:1

  4. December 4, 2013 - 12:45 pm | Permalink

    For the colors of your quote that lacks contrast (#444444), you could also use #6F6F6F which is valid (on white).

    To obtain this, I used Tanaguru Contrast-Finder, an opensource tool we’ve just released. It is aimed at proposing valid contrast combination (not just evaluating).

    You can have more information on the blog post Introducing Tanaguru Contrast-Finder 0.1.

    Hope this helps

Comments are closed.