How this works in your browser
Each colour is converted to relative luminance using the WCAG formula, which applies a gamma correction to each channel and then weights them by how much each contributes to perceived brightness: green heavily, red moderately and blue very little. The contrast ratio is the lighter luminance plus 0.05 divided by the darker plus 0.05, giving a value between 1 and 21. Those offsets model the ambient light a real screen reflects, which is why pure black on pure white tops out at 21 rather than infinity. Basing the calculation on weighted luminance rather than raw colour distance is what makes it correspond to what people can actually read.
Color Contrast Checker vs. typical online calculators
| Feature | Color Contrast Checker (in-browser) | Typical online calculators |
|---|---|---|
| Where the maths runs | In your browser, on your device | Often posted to a server to compute |
| Your inputs are stored | Never - nothing is sent or saved | Frequently logged with your session |
| Works offline once loaded | Yes | No - needs a live connection |
| Ads inside the result area | None | Common on free calculators |
| Account required | No | Often, to save or export results |
| Usage limits | None - free, unlimited use | Sometimes capped per day |
Who uses Color Contrast Checker
Meeting accessibility requirements
Verify colour pairs against the standard most regulations reference.
Auditing an existing design
Find the low-contrast text that looks fine to you and fails for others.
Choosing brand colours
Check whether a brand palette can carry readable text before committing.
Reviewing dark mode
Confirm contrast holds in both light and dark themes.
How to use Color Contrast Checker
- 1
Open the Colour Contrast Checker
Go to tools.slaytic.com and open the Color Contrast Checker. No sign-up or account required.
- 2
Set your text and background colours
Enter the actual pair as they appear in your design.
- 3
Read the ratio and results
Pass or fail is shown for AA and AAA, at both normal and large text sizes.
- 4
Adjust until it passes
Darken the text or lighten the background until the ratio clears 4.5 to 1 for body copy.
Frequently asked questions
What contrast ratio do I need to pass WCAG AA?
At least 4.5:1 for normal text, or 3:1 for large text.
What is WCAG AAA?
A stricter accessibility standard requiring at least 7:1 contrast for normal text.
Does this check colorblind-safe combinations specifically?
No, this checks luminance contrast per WCAG guidelines, which improves general readability but does not test for specific colorblindness types.
What counts as large text?
Roughly 18.66px and bold, or 24px at any weight. The threshold exists because larger letterforms remain legible at lower contrast, which is why a heading can pass at 3 to 1 where body text needs 4.5. It is worth checking the actual rendered size rather than assuming a heading qualifies.
Does grey placeholder text need to pass?
Yes, and it is the most common failure on real sites. Light grey on white is a persistent design habit that routinely lands around 2 to 1. Placeholder text, helper text and disabled-looking labels all carry meaning, and if users cannot read them the interface is broken regardless of how clean it looks.
Is passing AA good enough?
It is the level most accessibility regulations reference, so it is the practical requirement. AAA at 7 to 1 is worth targeting for body text in anything read at length, and for audiences likely to include older users, where contrast sensitivity declines with age even without diagnosed vision impairment.
Why is contrast not simply the difference between two colours?
Because human vision responds to luminance unevenly across the spectrum. Green contributes far more perceived brightness than blue does, so two colours that look numerically distant can be perceptually close. The ratio is computed from weighted relative luminance rather than raw colour difference for exactly that reason.