Color Contrast Checker (WCAG)
Enter a text colour and a background colour to see their contrast ratio and whether they pass WCAG accessibility guidelines.
Large text sample
Normal body text sample. The quick brown fox jumps over the lazy dog.
🔒 Everything you type stays in your browser. Nothing is sent to a server.
By Shah Rukh, software developer · Last updated:
WCAG contrast requirements
| Content | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (24 px, or 18.66 px bold) | 3 : 1 | 4.5 : 1 |
| Icons, borders, form controls | 3 : 1 | — |
How contrast ratio is calculated
Ratio = (L1 + 0.05) ÷ (L2 + 0.05)
L1 and L2 are the relative luminance of the lighter and darker colour, from 0 (black) to 1 (white). Ratios range from 1:1 (identical colours) to 21:1 (black on white).
Good contrast helps people with low vision, colour blindness and anyone reading a phone in sunlight. Many countries require WCAG AA for public-sector and large business websites.
Frequently asked questions
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA.
Is AAA required?
Usually not. AA is the common legal and industry standard. AAA is best for long-form reading.
Does contrast affect SEO?
Indirectly. Lighthouse accessibility audits flag low contrast, and readable pages keep visitors longer.
Related tools
QR Code Generator
Free QR codes for links, Wi-Fi, text and contacts.
Color Picker & Palette
HEX, RGB and HSL codes plus matching palettes.
Base64 Encoder / Decoder
Encode or decode Base64 text (UTF-8 safe).
URL Encoder / Decoder
Percent-encode or decode URLs and query strings.
Binary / Hex Converter
Convert between binary, octal, decimal and hex.
CSS Gradient Generator
Linear, radial and conic gradients with CSS code.