Pick a text color and a background color — the WCAG contrast ratio updates live, with pass/fail verdicts for AA and AAA at normal and large text sizes.
Large heading text
This is what normal body text looks like at this contrast level.
How to read the results
4.5:1 is the WCAG AA minimum for normal body text — the baseline every interface should hit. 3:1 covers large text (18px bold / 24px regular and up). 7:1 and 4.5:1 are the stricter AAA targets. If a pair fails, darken the text, lighten the background, or both — small hex changes often flip a fail to a pass.
Common pairs, checked
Black on white: 21:1 — passes everything. #767676 grey on white: 4.54:1 — the exact AA floor for body text (details in grey text on white). #E8E8E8 on #16181D: ~14:1 — the comfortable dark-mode pairing from our dark background guidelines. #999999 on white: 2.8:1 — fails body text, which is why so much minimalist design is hard to read.
Related guides
White text on black: readability · Black text on white: the standard · Designing black-background sections · Why white-on-black can double