Choose your colours:
Success for WCAG 3
This is sample text given the selected colours.
| Font | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| 12px | Ø | Ø | Ø | Ø | Ø | Ø | Ø | Ø | Ø |
| 14px | Ø | Ø | Ø | 100B | 100B | 90B | 75B | Ø | Ø |
| 15px | Ø | Ø | Ø | 100B | 90B | 75B | 70+15 | Ø | Ø |
| 16px | Ø | Ø | Ø | 90B | 75B | 70+15 | 60+15 | 60 | Ø |
| 18px | Ø | Ø | 100B | 75B | 70+15 | 60+15 | 55+15 | 55 | 55 |
| 21px | Ø | Ø | 90B | 70B | 60+15 | 55+15 | 50+15 | 50 | 50 |
| 24px | Ø | Ø | 75B | 60+15 | 55+15 | 50+15 | 45+15 | 45 | 45 |
| 28px | Ø | 100 | 70+15 | 55+15 | 50+15 | 45+15 | 43+15 | 43 | 43 |
| 32px | Ø | 90 | 65+15 | 50+15 | 45+15 | 43+15 | 40+15 | 40 | 40 |
| 36px | Ø | 75 | 60+15 | 45+15 | 43+15 | 40+15 | 38+15 | 38 | 38 |
| 42px | 100 | 70 | 55 | 43 | 40 | 38 | 35 | 35 | 35 |
| 48px | 90 | 60 | 50 | 40 | 38 | 35 | 33 | 33 | 33 |
| 60px | 75 | 55 | 45 | 38 | 35 | 33 | 30 | 30 | 30 |
| 72px | 60 | 50 | 40 | 35 | 33 | 30 | 30 | 30 | 30 |
| 96px | 50 | 45 | 35 | 33 | 30 | 30 | 30 | 30 | 30 |
You might also be interested in the ACHECKS Accessibility Toolbox:
More about this colour contrast checker:
Whereas the WCAG 2 standards test two colours for accessibility based merely on the contrast between the two, the new Accessible Perceptual Contrast Algorithm (APCA) calculates contrast based on the luminance of the colours which differ based on the foreground versus the background colour, the font size and the font weight.
Because APCA provides a more accurate estimation of colour contrast perception, where your colours pass this test, but fail the WCAG 2 contrast checks, you may use the following disclaimer:
This website has undergone colour contrast checks using the APCA guidelines for determining text contrast. The APCA guidelines improve upon the accessibility colour contrast checks under WCAG 2, and therefore compliant with the ADA.
Interpreting the table:
Lc stands for Lightness Contrast and is based on the font weight, size, and color pair. The lookup table above associates font weight and size to minimum contrast value. Cells marked with B are appropriate for body text at the given Lc value. For values with a numeric subscript, add an equivalent Lc for use in body text. For example, for 18px font size at 500 font weight, you should use a minimum of 70+15 = 90 Lc for body text, or simply 70 Lc for non-body text.
ACHECKS provides a comprehensive digital accessibility toolbox for free to help make the web a more accessible place.
We also have subscription plans available to help your organization manage and report on its accessibility compliance. The subscription service regularly checks all of the pages on your domain and provides you comprehensive reports, highlights remediation steps and provides a aggregate report across all of the pages on your website, including web and PDF files.
Contact us below if your organization has compliance requirements that could use a hand.
