Contrast checker
Whether anyone can actually read it.
Examples temporarily replace the input and settings. You can restore your previous work.
0 characters
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.
Example
Worked example — Contrast checker
Use the input lines in order and the settings below. Compare your result with the output rows.
| Item | Value |
|---|---|
| Input 1 | #000000 |
| Background, when only one colour is given | #ffffff |
| Output 1 | #000000 on #ffffff |
| Output 2 | Ratio 21.00 : 1 |
| Output 3 | Body text AA passes (needs 4.5) |
| Output 4 | Body text AAA passes (needs 7) |
| Output 5 | Large text AA passes (18.66px bold or 24px, needs 3) |
| Output 6 | Large text AAA passes (needs 4.5) |
| Output 7 | Borders, icons passes (needs 3) |
Black on white has a 21:1 contrast ratio and passes the tool’s AA and AAA text checks.
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?
- Not for solid colours: the ratio is symmetrical, so text on background and background on text give the same number. With a see-through colour (#33333380, rgba(…)) it does: the first colour is laid over the second, and a see-through background over a white page, so put the text colour first.
- 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.