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.
Discord Server Template
Design channels and roles, then build them in one click.
Discord Moderation Bot
Make your own mod bot with kick, ban, mute and filters.
Discord Bot Maker
Build a custom Discord bot without coding.
Discord Welcome Bot
Custom welcome messages and auto-roles for new members.
Color Picker & Palette
HEX, RGB and HSL codes plus matching palettes.