Pick a text colour and a background colour and see their contrast ratio, plus whether the pair passes WCAG AA and AAA for normal and large text. A live preview shows the two colours together so you can judge readability at a glance. Everything runs in your browser.
Large sample text
Small sample text for contrast preview
Contrast ratio
17.4:1
How it works
The contrast ratio compares the relative luminance of the two colours. Each colour’s luminance is computed from its red, green and blue channels using the WCAG formula, then the ratio is (lighter + 0.05) ÷ (darker + 0.05). The result runs from 1:1 (identical) to 21:1 (black on white).
WCAG sets thresholds: normal text needs 4.5:1 for AA and 7:1 for AAA, while large text (about 18pt, or 14pt bold) needs only 3:1 for AA and 4.5:1 for AAA. The tool marks each of the four checks pass or fail against your ratio.
Enter colours as hex — #RGB or #RRGGBB, with or without the hash — or use the colour pickers. Only the RGB values matter for contrast; any alpha/transparency is ignored, so test against the actual solid colour your text sits on.
Practical examples
Body text on white
Dark grey #595959 on white gives about 7:1 — it passes AAA for normal text, a safe choice for paragraphs. Lighten it to #767676 and it drops to ~4.5:1: AA only.
A brand colour for buttons
White text on a mid-blue #3b82f6 lands around 3.7:1 — fine for large button labels (AA large) but failing for small text, a nudge to darken the blue or enlarge the label.
Placeholder grey that fails
Light grey #bbbbbb on white is roughly 1.9:1 and fails every level. The preview makes the problem obvious, and you can darken until the AA badge turns green.
Frequently asked questions
What is a contrast ratio?
A number from 1:1 to 21:1 describing how different two colours are in brightness. Higher is more readable. It is calculated from the colours’ relative luminance, not just their hue, so two vivid colours can still have poor contrast.
What ratio do I need to pass WCAG?
For normal text: 4.5:1 for AA and 7:1 for AAA. For large text (≈18pt, or 14pt bold): 3:1 for AA and 4.5:1 for AAA. AA is the common legal and practical target; AAA is stricter.
What counts as “large” text?
Roughly 18pt (24px) and up, or 14pt (about 18.66px) if bold. Larger letters are easier to read, so WCAG allows a lower contrast threshold for them.
Which colour is the foreground?
The first field is the text (foreground) and the second is the background, but contrast is symmetric — swapping them gives the same ratio. The order only affects which one the preview uses for the text.
Does transparency affect the result?
This tool ignores alpha and compares solid colours. If your text or background is semi-transparent, first work out the effective colour it blends to over what is behind it, then test that.
Is AA good enough, or should I aim for AAA?
AA (4.5:1) is the widely required baseline and is fine for most sites. AAA (7:1) is recommended where readability is critical — long-form reading, low-vision audiences — but is not required for general compliance.
Why can a colourful pair still fail?
Contrast depends on brightness, not colourfulness. Red on green looks bold but can have a low luminance ratio, which is also why colour-blind users may not distinguish them. Always check the number, not just the look.
Does passing contrast make my site fully accessible?
No — it covers one important criterion. Accessibility also involves keyboard use, focus states, alt text, semantic markup and more. Contrast is necessary but not sufficient on its own.
Are my colours sent anywhere?
No. The comparison happens entirely in your browser; nothing you enter is uploaded or stored.
Related tools
Color Converter
Convert colors between HEX, RGB and HSL, with alpha support and a live swatch. Runs in your browser.
Developer tools
Meta Tag Generator
Generate SEO, Open Graph and Twitter meta tags for your page — copy the HTML straight into your <head>.
Developer tools
HTML Entity Encoder and Decoder
Encode text to HTML entities or decode named, decimal and hex entities back to characters. In your browser.
Developer tools
Password Strength Checker
Test how strong a password is in your browser — see its entropy, estimated crack time and what to improve. Nothing is typed anywhere but your device.
Developer tools
Aspect Ratio Calculator
Find the simplified aspect ratio of any width and height, and resize while keeping that ratio. Runs in your browser.
Developer tools
Prime Number Checker
Check whether a number is prime, with its prime factorisation and the nearest primes. Runs in your browser.
Math & education