Contrast Checker
Pick two colours — we'll tell you if they're easy to read together, in plain English.
Your text colour on your background
The quick brown fox jumps over the lazy dog.
This is what normal paragraph text looks like. Can you read this comfortably without straining your eyes?
Small text example — harder to read if contrast is low.
Excellent
Works perfectly for all text sizes and UI elements.
Readability score
13.98 out of 21
What can you use this colour combination for?
Reading paragraphs
Great for body text & paragraphs — comfortable to read.
Large headings
Fine for big headings and titles.
Buttons & icons
Good for buttons, icons, and UI elements.
Best possible readability
Excellent contrast — top-tier readability for everyone.
Why does colour contrast matter?
Who is affected?
About 1 in 12 men and 1 in 200 women have some form of colour blindness. Millions of others have low vision. Poor contrast makes text genuinely unreadable for them.
What score should I aim for?
A score of 4.5:1 or higher ("Good") is the standard target for body text. 7:1 ("Excellent") is the gold standard. Anything under 3:1 should be avoided for text.
What about headings?
Large, bold headings (18px+ or 14px+ bold) are easier to see, so they only need a score of 3:1. But the higher the better.
Is this a legal requirement?
For public websites in many countries (EU, US, UK) meeting a contrast score of 4.5:1 for text is required by accessibility law (WCAG 2.1 Level AA).
More Color Tools
Continue exploring — all tools are free, no sign-up needed
Mixing Lab
Mix and blend colours to create the perfect shade
Image → Palette
Extract a harmonious palette from any photo
Tints & Shades
Generate a full 50–950 colour scale from any hex
Gradient Generator
Design linear, radial & conic CSS gradients
Colour Blindness Simulator
Preview palettes as seen by colour-blind users