Contrast checker
Whether anyone can actually read it.
Output
Paste or type above to see the result here.
Your files stay on your device
This tool runs entirely in your browser. What you paste is processed on your device and is never sent to a server, so it is safe to use with tokens, keys and unpublished text.
How it works
- Type a pair per line: #333 on #fff. A comma, a slash or just a space works too.
- Give one colour on its own and it is checked against the background above.
- Read the ratio first; everything else follows from it.
- 4.5 is the number to beat for body text.
Frequently asked questions
- What do AA and AAA actually require?
- AA asks for 4.5 : 1 for body text and 3 : 1 for large text — 24px, or 18.66px bold. AAA asks for 7 : 1 and 4.5 : 1. Borders, icons and the edges of form fields need 3 : 1.
- Why does my grey fail?
- #777 on white is 4.48 : 1, which misses AA by two hundredths. It is the classic near miss and the reason people check at all: it looks fine to whoever chose it and is genuinely hard to read for a good many people. #757575 passes.
- Does it matter which colour I put first?
- No. The ratio is symmetrical, so text on background and background on text give the same number.
- Is a passing ratio enough to call it accessible?
- No. Contrast is one requirement of many, and it says nothing about focus states, hit targets, motion or whether the colour is carrying meaning on its own. It is a floor, not a verdict.
- Is anything sent to a server?
- No. It runs in your browser, so what you paste stays on your computer.
Related tools
◒ Colour converter HEX, RGB, HSL and CMYK — plus the contrast ratio that decides readability. ◒ CSS formatter One declaration to a line, or the whole file on one. ◉ Image tools Colour picker from image Click the picture for a colour code; get its main colours as a palette. ‹› HTML formatter Indented so you can read it, or squeezed so you can ship it.