Contrast Checker
Check colour contrast against WCAG AA and AAA, with live text preview and correct large-text thresholds.
Check colour contrast against WCAG AA and AAA - the accessibility standard most audits use.
Preview
The quick brown fox jumps over the lazy dog.
WCAG result
7.36:1
Normal text thresholds
.text {
color: #94a3b8;
background: #0f1117;
}
/* Contrast ratio: 7.36:1 */About the contrast checker
Contrast ratio runs from 1:1, identical colours, to 21:1, black on white. WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1. Large means 24 pixels, or 18.66 pixels when bold.
This is the most common accessibility failure on the web, and it is also the easiest to fix, because it is a pure calculation with no judgement involved.
How to use it
- 1Set the text colour and the background.
- 2Enter the real font size and mark it bold if it is.
- 3Read the ratio and the AA and AAA results.
- 4Adjust until it passes, checking the live preview.
Questions
What ratio do I actually need?
4.5:1 for normal text under AA, 3:1 for large text. AAA raises those to 7:1 and 4.5:1. AA is the level most legislation references.
What counts as large text?
24 pixels or larger, or 18.66 pixels and larger when bold. The threshold is lower because larger glyphs are easier to read at lower contrast.
Do icons need to meet contrast rules?
Meaningful icons and interface components need 3:1 against their background under WCAG 2.1. Purely decorative graphics are exempt.