Color Contrast Checker
Check the WCAG contrast ratio between a text colour and a background colour, with live preview and AA / AAA pass results.
Choose colors
Contrast results
Contrast ratio
14.68:1
- AA normal text (4.5:1)✓ Pass
- AA large text (3:1)✓ Pass
- AAA normal text (7:1)✓ Pass
- AAA large text (4.5:1)✓ Pass
Preview heading
Sample text shows the selected foreground and background colors.
What is colour contrast?
Colour contrast is the difference in luminance between text and its background. WCAG sets minimum ratios so people with low vision can still read the text.
AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises those to 7:1 and 4.5:1.
How to check colour contrast
- Enter or pick the text colour.
- Enter or pick the background colour.
- Read the live ratio and the AA / AAA check list.
- Adjust either colour until the combination passes.
Contrast examples
Black on white
#000000 on #ffffff
21:1 — AAA
Typical body text
#1f2937 on #ffffff
14.7:1 — AAA
A weak combination
#999999 on #ffffff
2.85:1 — Fail for normal text
Browser checker vs other ways
| Criterion | UrsaKit Contrast Checker | Browser DevTools | Manual calculation |
|---|---|---|---|
| Live colour pickers | Yes | Limited | No |
| AA / AAA checklist | Yes | Partial | No |
| Data leaves the device | No, runs in the browser | No | No |
Frequently asked questions
Is the contrast checker free?
Yes, with no account and no limit.
What ratio do I need for body text?
WCAG AA requires at least 4.5:1 for normal text. Large text of 18pt, or 14pt bold, only needs 3:1.
What counts as large text?
18pt (24px) regular or 14pt (18.66px) bold, per the WCAG definition.
Does passing AAA mean the design is accessible?
It is one important measure, but accessibility also covers semantics, focus states, keyboard use and motion.
Which colours are supported?
Three- and six-digit hex values, with or without the leading hash.