Check Color Contrast
Large heading text
Normal body text at 16px. Can you read this comfortably?
Button7.57:1
- Normal textAA passAAA pass
- Large text (24px, or 19px bold)AA passAAA pass
- Icons and input bordersAA pass
Make sure people can read your text. Enter a text color and a background color to get the WCAG contrast ratio and see whether it passes AA and AAA for normal text, large text and interface elements.
- Free
- Runs in your browser
- WCAG 2 AA and AAA
- No sign-up
How It Works
Test a color pair in three steps.
Enter two colors
Type HEX, rgb() or hsl() values, or use the pickers.
Look at the preview
Heading, body text and a button are drawn with your colors.
Read the results
The ratio and a pass or fail for each WCAG level.
What is a contrast ratio?
WCAG measures contrast as a ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). Level AA, the target in most accessibility laws and policies, asks for at least 4.5:1 for normal text and 3:1 for large text and for icons and form borders. Level AAA asks for 7:1 and 4.5:1. Low contrast affects far more people than those with low vision: anyone reading a phone in sunlight benefits.
Passing the ratio does not guarantee readability. Very thin fonts and small sizes can still be hard to read, so check the preview too.
Exact WCAG formula
Uses the WCAG 2 relative luminance formula. The ratio is cut, not rounded, to two decimals, so 4.499 shows as 4.49 and fails.
Transparency handled
A semi-transparent text color is blended with the background first, as the reader sees it.
Large text rule
Large means at least 24px regular, or about 19px bold (18pt and 14pt in WCAG terms).
UI components
Icons, focus rings and input borders need 3:1 against what is next to them (WCAG 2.1, criterion 1.4.11).
Convert PDF Files and File Formats
Find the perfect online tool to combine PDF files, compress documents, and handle your daily workflow effortlessly.
PDF Tools
All your PDF needs in one place
- Merge PDF
- Organize PDF
- Split PDF
- Compress PDF
- Convert to Word
- Convert to Image
Image Tools
Edit and optimize your images
- Resize Image
- Compress Image
- Convert Format
- Crop Image
- Add Watermark
- Remove Background
Word Tools
Work with Word documents
- Convert to PDF
- Merge Documents
- Split Documents
- Compress File
- Edit Text
- Add Watermark
Excel Tools
Process Excel spreadsheets
- Convert to PDF
- Convert to CSV
- Merge Sheets
- Split Sheets
- Compress File
- Clean Data
Why Use This Contrast Checker
Accessibility checks while you pick colors.
Live preview
See heading, body text and a button in your colors as you change them.
All WCAG levels
AA and AAA for normal text, large text and UI components at a glance.
Swap
Check light-on-dark and dark-on-light with one click.
Any color format
HEX, RGB, HSL, HSV and color names are all accepted.
Frequently Asked Questions
Questions people ask about the Contrast Checker.
For WCAG 2 level AA: 4.5:1 for normal text and 3:1 for large text and UI components. For level AAA: 7:1 for normal text and 4.5:1 for large text.
Not for the ratio, which is the same either way. It matters for the preview and for transparency, because only the text color can be semi-transparent here.
No. WCAG makes exceptions for logos, decorative text and inactive (disabled) controls. Everything else people need to read should pass.
WCAG 3 is still a draft, and a newer contrast method called APCA has been discussed for it. Laws and audits today still refer to the WCAG 2 ratio used here.
Related Text & Developer Tools
More small utilities that run in your browser.
Color Converter
Convert colors between HEX, RGB, HSL and HSV.
Box Shadow Generator
Design CSS box shadows with live preview.
CSS Gradient Generator
Build linear, radial and conic gradients for CSS.
PX to REM Converter
Convert pixels to rem and rem to pixels.
HTML Entity Encode & Decode
Escape HTML special characters or turn entities back into text.