Color Contrast and Accessibility
The correct use of color makes content more perceivable to all users. It also makes websites more inclusive for people with disabilities.
What is Contrast?
Contrast is the difference in brightness between two colors. A good way to understand contrast is to compare colors in the same tonality (e.g.: grayscale). The closer they are, the lower the contrast between them is.
19.92
:1
10.91
:1
3.15
:1
1.41
:1
1.12
:1
1.05
:1
Contrast can also be measured between colors in different tonalities.
4.97
:1
3.35
:1
2.4
:1
1.79
:1
1.37
:1
1.08
:1
Contrast in WCAG
WCAG(opens in a new tab) (accessibility guidelines) defines 3 levels of accessibility: A, AA and AAA. As an example, a website meets AA level if it passes all requirements for this level.
When it comes to contrast, there are success criteria for Text Contrast (AAA and AA), and for Non-Text Contrast (AA only).
Text Contrast
Non-text Contrast
Text Contrast
In it comes to text (or images of text), there needs to be enough contrast between text and background colors. There are two levels of acceptable contrast: minimum (AA) and enhanced (AAA). Depending on the size of the text, the definition of this levels varies.
● Small Text
Text is considered small when it is less than 18pt (roughly 24 pixels) or less than 14pt bold (roughly 19px). Small text needs 4.5:1 contrast to pass AA level and 7:1 contrast to pass AAA level.
Small Text vs. Background4.5:1AA7:1AAA
Example
8.74AAA
6.09AA
5.02AA
4.20FAIL
3.56FAIL
2.48FAIL
1.96FAIL
1.51FAIL
1.23FAIL
2.40FAIL
3.45FAIL
4.18FAIL
5.00AA
5.90AA
8.48AAA
10.69AAA
13.87AAA
17.01AAA
● Large Text
Text is considered large when it has 18pt or more (roughly 24 pixels) or 14pt bold or more (roughly 19px). Large text needs 3:1 contrast to pass AA level and 4.5:1 contrast to pass AAA level.
Large Text vs. Background3:1AA4.5:1AAA
Example
8.74AAA
6.09AAA
5.02AAA
4.20AA
3.56AA
2.48FAIL
1.96FAIL
1.51FAIL
1.23FAIL
2.40FAIL
3.45AA
4.18AA
5.00AAA
5.90AAA
8.48AAA
10.69AAA
13.87AAA
17.01AAA
● Buttons & Links
When buttons and links have text content, the same contrast rule is applicable in all their states (e.g.: default, hover, focus, etc). If they don't have a background color, we should use the adjacent background color to measure the text contrast.
Buttons with Background Color
8.93AAA
3.39FAIL
2.55FAIL
Buttons with Border only
10.07AAA
4.27FAIL
2.32FAIL
Links
8.74AAA
5.02AA
3.56FAIL
Non-Text Contrast
User interface components need to have a contrast of at least 3:1 against adjacent backgrounds.
The guidelines(opens in a new tab) are open to interpretation when it comes to what identifies buttons.
Some people in the community believe that text is enough to identify the button as a user interface component. As such, having sufficient text contrast is enough.
Others think that the hit area of a button is fundamental to identify it. As such, it should have enough contrast with the adjacent background. We are in this group.
Our tool reports buttons without enough contrast with their adjacent color as a violation of the Non-Text Contrast rule. We check the three most common states: default, normal, and focus.
Object vs. Background3:1AA
● Buttons with background
Depending on the adjacent color, the same button might violate the non-text contrast rule.
In different adjacent backgrounds
5.4AA
3.62AA
1.5FAIL
● Buttons with border only
When buttons have transparent background and border color, we measure the contrast between the border color and the adjacent background color.
in different adjacent backgrounds
5.4AA
3.62AA
1.5FAIL
● Buttons with border and background
When buttons have background and border color, we measure the contrast between both the border and background color against the adjacent background color. The result that is shown is the hightest contrast of both.
in different adjacent backgrounds
21AA
4.07AA
8.17AA