Contrast and Color Use are Vital to Web Accessibility
Many people including web developers fail to understand how the correct use of contrast and color use are vital to web accessibility. Users, including users with visual disabilities, must be able to perceive content on the page.
There is a great deal of fine print and complexity within the Web Content Accessibility Guidelines (WCAG) 2 that can easily confuse web content creators and web accessibility evaluators.
This article pulls together the terms and principles needed to understand WCAG 2 requirements for contrast and color.
How WCAG Defines Colors
Colors can be defined in a few ways. For example, this shade of blue may commonly be defined in three different ways in webpage styles:
- rgb (97, 97, 255): The amount of red, green, and blue that form a color are each presented as a number between 0 and 255.
- #6161FF: This is a “hexadecimal” format where the red/green/blue values are presented as a combination of six letters or numbers. Typically called “Hex,” this is a very common format in webpages.
- hsl (240, 100%, 69%): Hue, saturation, and lightness map more closely to the way people perceive colors. Changing the “lightness” of a color will change its contrast ratio to another color.
Alpha, which is the opacity or transparency of a color, will also impact contrast. Alpha is presented as a number between 0 (completely transparent) and 1 (completely opaque). Reducing the alpha for text will typically reduce its contrast because you are allowing an underlying color to bleed through.
What is WCAG 2 “Contrast Ratio”
In WCAG 2, contrast is a measure of the difference in perceived “luminance” or brightness between two colors (the phrase “color contrast” is never used). This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white text on a white background) to 21:1 (e.g., black text on a white background). To give a frame of reference, on a white background…
- Pure red (#FF0000) has a ratio of 4:1. I am red text.
- Pure green (#00FF00) has a very low ratio of 1.4:1. I am green text.
- Pure blue (#000FF) has a contrast ratio of 8.6:1.I am blue text.
Important
If text and background colors are inverted, the contrast ratio remains the same.
Three success criteria in WCAG 2 address contrast:
One additional success criterion, 1.4.1 Use of Color, references the contrast ratio as part of the requirement for links that are differentiated by color alone.
We will review these four success criteria in detail.
How is WCAG Contrast Minimum Defined
This Level AA requirements reads:
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 contrast requirement.
Here are some examples of text with almost almost exactly 4.5:1 contrast
- Gray (#767676) on white
- Purple (#CC21CC) white
- Blue (#000063) on gray (#808080)
- Red (#E60000) on yellow (#FFFF47)
For many of us, some of these combinations are not very readable. That is why 4.5:1 is a minimal contrast ratio.
Important
WCAG requires “at least 4.5:1” contrast, so you cannot round a contrast ratio up to 4.5:1. For example, #777777 is a commonly-used shade of gray with a 4.48:1 contrast ratio. It does not meet the WCAG contrast threshold.
Images of text
These contrast requirements also apply to text within a graphic, called “images of text” in WCAG 2.
Example
The white text in the image below has insufficient contrast.
Outline and halo
Text effects, like outlines, can impact perceived contrast. WCAG 2 states that the color of a text outline or border can be used as the text or foreground color when measuring contrast.
A text glow/halo around the letters can be used as the background color.
Exceptions
There are three exceptions to this 4.5:1 contrast requirement: large text, incidental text, and logotypes.
Large text
Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.
For example:
- Gray (#949494) 18 point text on white
- Purple (#C86ff1) 14 point + bold text on white
Note
- In web pages, pixels are much more common for text size than points. 18 points maps to 24 pixels and 14 points to approximately 18.67 pixels.
- In CSS,bold text typically has font-weight:bold, or font-weight:700or greater
- This applies to images of text as well, but it can be difficult to measure text size in an image.
Incidental
WCAG 2.0 defines four types of “incidental” text that are not required to meet the contrast requirements.
- Inactive:An inactive element, like a disabled Submit button ( Submit ), is identified visually by its lower-contrast state.
- Pure decoration:Decorative text that is not meant to be read. An example of this might be a picture of a bookshelf on a library homepage. The titles of the books are not meant to be read by the user.
- Not visible to anyone:Text that is meant to be hidden, like an invisible skip link would not need to meet any contrast requirements until it becomes visible.
- Part of a picture that contains significant other visual content:Text that is not an important part of the information in the image, like a name tag on the shirt of a person in a photo of a party, does not need to meet any contrast requirements.
Note
To help determine if text in an image needs sufficient contrast, you might consider that any text that would be added to the image’s alternative text should probably meet contrast requirements while text that would not be added to alternative text can usually be considered incidental.
Logotypes
Text that is part of a logo or brand name has no contrast requirement. If we look back at the example of an image of text used earlier, the amazon music logo would be exempt.
Not mentioned
A couple important contrast considerations are not mentioned in 1.4.3.
Gradients, background images, and transparencies
Text over gradients, semi-transparent colors, and background images still need to meet contrast requirements, but WCAG does not provide any guidance on how to measure their contrast. We recommend usually testing the area where contrast is lowest.
Color changes on hover, focus, etc.
Text sometimes changes color while the user interacts with it using a mouse or keyboard. CSS can be used to define hover, focus, or active states for interactive elements. There is no mention of special consideration for these changes in text color, meaning text in all these states must still meet the same contrast requirements.
