WCAG Contrast Checker
Check whether text is readable against its background. Enter two colours in any CSS format – hex, rgb(), hsl() or a name – and see the contrast ratio with pass or fail for normal text and large text at levels AA and AAA, and for user-interface components and graphics. A live sample shows the colours, transparent text is blended over the background, and when a pair fails the checker suggests the nearest text or background colour of the same hue that passes. Check a whole palette at once in the matrix.
- Runs in your browser
- No sign-up
- Free to use
Hex, rgb(), hsl() or colour names. A transparent text colour (alpha below 1) is blended over the background.
Normal text (16 px) – the quick brown fox jumps over the lazy dog.
Large text (24 px)
Bold text (18.66 px)
Button border and iconCheck a whole palette
How to use WCAG Contrast Checker
- Enter the text and background colours.
- Read the ratio and the five results.
- Apply a suggested fix if needed.
- Paste your palette to check every pair.
WCAG Contrast Checker features
WCAG 2.2
AA, AAA and non-text contrast.
Any CSS colour
Hex, rgb, hsl, names, alpha.
Nearest fix
Same hue, minimum change.
Live sample
Text sizes and a UI element.
Palette matrix
Every pair at once.
Private
Runs in your browser; nothing is uploaded.
When to use WCAG Contrast Checker
- Choosing accessible brand colours.
- Checking buttons and links.
- Accessibility audits.
- Design system palettes.
WCAG Contrast Checker FAQ
What ratio do I need?
AA: 4.5:1 for normal text, 3:1 for large text and UI components. AAA: 7:1 for normal and 4.5:1 for large text.
What counts as large text?
At least 24 CSS pixels, or 18.66 pixels when bold.
Why is 4.49 a fail?
WCAG thresholds are exact; the ratio is rounded down so a value just below the limit never passes.
What about APCA?
APCA is a proposed method for a future WCAG version. Current requirements use the WCAG 2 ratio shown here.
How contrast is calculated
The ratio compares the relative luminance of the two colours, from 1:1 (identical) to 21:1 (black on white). Luminance weights green most and blue least, which is why yellow on white fails while blue on white often passes.
Contrast is one of the most common accessibility failures, and one of the easiest to fix early in design.
Privacy: everything on this page runs in your browser. What you type or paste is not uploaded, stored or logged, and the result is generated on your device, so you can safely work with unpublished content, client data or drafts.
Tip: the result updates as you type, so you can try variations quickly. Copy the output with one click or download it as a file, and keep a copy of your input if you want to come back later – nothing is saved between visits.
Who it is for: the tool is built for site owners, marketers, writers and developers alike. You do not need to install anything or create an account, it works on phones as well as on desktop computers, and the results are plain text you can paste into any CMS, spreadsheet, code editor or ticket.
Accuracy: the rules used here are documented on the page and follow the published guidelines of the major search engines and web standards. Where a result is an approximation or a rule of thumb rather than an official limit, the page says so, so you can decide how much weight to give it.
Good practice: generated markup and files only help when they match the real page. Publish them together with the visible content they describe, test the page with the official tools from the search engines, and update the markup whenever the page changes.