Contrast Checker
Check whether a text and background colour pair meets WCAG accessibility contrast rules. Pick two colours and see the ratio plus AA/AAA pass or fail for normal and large text.
How it works
Colour contrast is the difference in brightness between text and its background, expressed as a ratio from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) set minimum ratios so that people with low vision can read your text. This tool computes the ratio from each colour's relative luminance and checks it against the WCAG thresholds.
WCAG level AA requires 4.5:1 for normal text and 3:1 for large text (about 18.66px bold or 24px and up). The stricter AAA level requires 7:1 and 4.5:1. Aim for AA as a baseline and AAA where you can.
Examples
- Black (#000) on white (#fff) gives the maximum 21:1 ratio.
- #767676 grey on white is exactly 4.5:1 — the AA minimum for body text.
- Large headings only need 3:1 to pass AA.
Frequently asked questions
- What contrast ratio do I need?
- WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1. AA is the common legal and design baseline.
- What counts as large text?
- Roughly 18.66px and bold, or 24px and up regardless of weight. Large text has a lower contrast requirement because it is easier to read.
- How is the ratio calculated?
- From each colour's relative luminance: (lighter + 0.05) ÷ (darker + 0.05). Luminance weights red, green and blue by how the eye perceives them.
- Does it check colour blindness?
- Contrast ratio helps everyone including many colour-blind users, but it does not replace testing that information is not conveyed by colour alone.