PopularHot
Color Picker
Use Color Picker to choose and convert color precisely — instant and free.
ColorOpen Tool
Contrast Checker
Check whether your text and background colours have enough contrast to be readable — measured against the WCAG accessibility standard, with pass or fail at each level. Runs in your browser.
Loading Contrast Checker…
Your browser is preparing the tool. It runs 100% locally.
Quick Answer
Pick a text colour and a background colour and the tool calculates their contrast ratio and shows whether the pair passes the WCAG accessibility levels: AA for normal text (4.5:1), AA for large text (3:1) and AAA for normal text (7:1). It uses the exact WCAG relative-luminance formula, with a live preview so you can see the result. Ratios run from 1:1 (no contrast) to 21:1 (black on white). It runs entirely in your browser.
What the Contrast Checker Does
Choose the two colours and you immediately get the contrast ratio between them, plus a pass or fail badge for each accessibility level, over a live preview of sample text. It is the quick way to check that text will be readable, including for people with reduced vision.
The contrast ratio is the standard measure of legibility used in web accessibility. A higher ratio means the colours are more distinct; the WCAG guidelines set minimum ratios that text should meet, and this tool tells you whether yours does.
How It Works
The tool converts each colour to its relative luminance — a brightness value that weights green most and blue least, matching how the eye perceives colour — and then takes the ratio of the lighter to the darker, with a small offset, exactly as the WCAG formula specifies. The result is a number from 1 to 21.
It then compares that ratio against the WCAG thresholds: 4.5:1 for normal text at level AA, 3:1 for large text at AA, and 7:1 for normal text at the stricter AAA. Each gets a pass or fail, so you can see at a glance which standards your colours meet.
What it checks & how
- Read the two colours. Take the text colour and the background colour.
- Compute relative luminance. Convert each colour to its relative luminance using the WCAG sRGB formula.
- Take the contrast ratio. Divide the lighter luminance plus 0.05 by the darker plus 0.05.
- Check against WCAG levels. Pass or fail at AA normal (4.5:1), AA large (3:1) and AAA normal (7:1).
WCAG contrast ratio
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)
L = 0.2126·R + 0.7152·G + 0.0722·B (linearised sRGB)
pass marks — AA normal 4.5:1 · AA large 3:1 · AAA normal 7:1Worked example
black #000000 on white #FFFFFF → 21:1 (passes every level)Ratios run from 1:1 (identical colours) to 21:1 (black on white); higher is more readable.
Technical Details
| Measures | WCAG contrast ratio (1:1 to 21:1) |
|---|---|
| Checks | AA normal, AA large, AAA normal |
| Formula | exact WCAG relative-luminance ratio |
| Preview | live sample text in your colours |
| Not shown | AAA large (4.5:1) |
| Where it runs | In your browser — nothing uploaded |
Standards & references
- WCAG 2 contrast ratio — the accessibility standard's measure of legibility: the ratio of the lighter colour's luminance to the darker's, each offset by 0.05, giving a value from 1:1 to 21:1.
- AA and AAA levels — level AA needs 4.5:1 for normal text and 3:1 for large text; the stricter AAA needs 7:1 for normal text (and 4.5:1 for large text, which this tool does not separately show).
- Large text definition — WCAG counts text as large at about 18 point, or 14 point bold; the tool does not know your font size, so choose the threshold that matches your text.
Accuracy & Limitations
It uses the exact WCAG 2 formula, so the ratio matches other compliant checkers. Where results seem to differ, it is usually because a colour was rounded or an alpha (transparency) was involved — this tool compares two solid colours.
It does not know your font size, so you choose which level applies. Large text — about 18 point, or 14 point bold — only needs 3:1 at AA, while normal text needs 4.5:1; pick the badge that matches your actual text.
It shows three of the four WCAG thresholds. AAA for large text (4.5:1) is the same number as AA for normal text, so you can read it from the AA-normal badge; the tool does not label it separately.
It assumes opaque colours on a flat background. Semi-transparent text, gradients or images behind the text change the real contrast, which a two-colour check cannot capture — test against the actual rendered colours.
WCAG 2 contrast is the current standard, but it is a model, not a perfect match for perception. A newer perceptual method (APCA, proposed for a future version) can rate some colour pairs differently; for compliance today, the WCAG 2 ratio shown here is what counts.
Real-World Use Cases
Designing accessible text
Check that body and heading colours are readable on their background.
Meeting accessibility rules
Confirm a colour pair passes WCAG AA or AAA before shipping.
Choosing button and link colours
Make sure interactive text stands out enough to read.
Auditing a design
Test existing colour pairs against the standard.
When to use it — and when not to
Good for
- Checking text-on-background readability
- WCAG AA and AAA compliance
- Choosing accessible colour pairs
- A quick contrast ratio with a preview
Not the best choice for
- Semi-transparent or layered colours
- Non-text contrast rules in full (icons, UI)
- The newer APCA perceptual model
- Knowing your text size for you
Need to check a whole page automatically? A browser accessibility tool (such as axe or Lighthouse) scans every element. Want the newer perceptual model? An APCA checker rates contrast differently for a future standard.
Frequently Asked Questions
What contrast ratio do I need?
For WCAG AA, normal text needs at least 4.5:1 and large text at least 3:1. For the stricter AAA, normal text needs 7:1. Higher is more readable; the maximum possible is 21:1 (black on white).
What counts as large text?
WCAG defines large text as about 18 point, or 14 point bold. Large text has a lower requirement (3:1 at AA), so if your text is that size or bigger, you can use the AA-large badge.
How is the ratio calculated?
Each colour is converted to a relative luminance — a brightness value weighted by how the eye sees red, green and blue — and the ratio is the lighter one plus 0.05 divided by the darker plus 0.05, exactly as WCAG specifies.
Why does it not show AAA for large text?
Because AAA for large text needs 4.5:1, the same number as AA for normal text. You can read it from the AA-normal badge; the tool just does not label it separately.
Does it handle transparent colours?
No. It compares two solid colours. If your text or background is semi-transparent, or sits over a gradient or image, the real contrast differs — test against the actual rendered colours.
What is relative luminance?
A measure of a colour's brightness as perceived, weighting green most and blue least and applying the sRGB gamma curve. WCAG uses it so the contrast ratio reflects how readable colours actually are.
Is a higher ratio always better?
For readability, yes — more contrast is easier to read, especially for low vision. Very high contrast (pure black on pure white) can feel harsh to some, so many designs use near-black on near-white, which still passes comfortably.
Does this guarantee my page is accessible?
It checks one colour pair against the contrast rules. A fully accessible page also needs readable text size, good structure, keyboard access and more — contrast is one important piece, not the whole picture.
Why might another checker give a slightly different number?
Usually rounding, or a difference in how a colour was entered. The underlying WCAG formula is fixed, so two compliant checkers on the same two solid colours should match to two decimals.
What is APCA?
A newer, perceptually based contrast method proposed for a future version of the guidelines. It can rate some pairs differently from WCAG 2. For meeting today's standard, the WCAG 2 ratio shown here is the one to use.
Can I check icons or borders, not just text?
WCAG has a separate 3:1 rule for non-text elements like icons and form borders. You can read the ratio here for any two colours, then apply the right threshold for what you are checking.
Is anything uploaded?
No. The check runs entirely in your browser; nothing is sent anywhere.
References
Computes the exact WCAG 2 contrast ratio from each colour's relative luminance and checks AA normal (4.5:1), AA large (3:1) and AAA normal (7:1); it is explicit that AAA large (4.5:1) is read from the AA-normal badge, that it compares solid colours (not transparency), and that you choose the level matching your text size.
Related Tools
Popular
HEX to RGB Converter
Use HEX to RGB Converter to choose and convert color precisely — instant and free.
ColorOpen Tool
Trending
Color Palette Generator
Use Color Palette Generator to choose and convert color precisely — instant and free.
ColorOpen Tool
Trending
Gradient Generator
Use Gradient Generator to choose and convert color precisely — instant and free.
ColorOpen Tool
RGB to HEX Converter
RGB to HEX Converter with copy-ready values for design and front-end work.
ColorOpen Tool
HEX to HSL Converter
HEX to HSL Converter online — accurate color values, palettes and previews in-browser.
ColorOpen Tool
Ready to try the Contrast Checker?
It is free, private and runs entirely in your browser — no sign-up, no uploads, no limits.