Contrast Checker
Calculate the contrast ratio between text and background colors and check WCAG conformance (AA, AAA) instantly — for readable, accessible color combinations.
Contrast ratio
-
Preview
Sample text 0123456789 ABC
0123456789 abcdefghijklmnopqrstuvwxyz
WCAG level
| WCAG level | Requirement | Result |
|---|---|---|
| Normal text (AA) | 4.5:1 | - |
| Large text (AA) | 3:1 | - |
| Normal text (AAA) | 7:1 | - |
| Large text (AAA) | 4.5:1 | - |
How to use
- 1
Pick text and background colors
Set the text and background colors with the pickers or HEX codes.
- 2
Check the ratio
The contrast ratio between the two colors appears instantly.
- 3
Review WCAG conformance
See pass/fail against WCAG AA and AAA levels and adjust the colors as needed.
Features
- Instant contrast ratio from text and background colors
- Pass/fail against WCAG AA and AAA levels at a glance
- Live preview of the actual rendering
- Everything computed in your browser; colors are never transmitted
Use cases
Checking website text colors
Verify that body and heading colors meet the ratio against your background.
Designing buttons and links
Validate that button labels and link colors read as interactive.
Slides and documents
Keep presentation text readable even on projectors by checking contrast.
Details
The contrast checker measures how strongly two colors differ in brightness, following WCAG 2.x: relative luminance is computed from linearized sRGB values weighted 0.2126 / 0.7152 / 0.0722, and the ratio is (L1 + 0.05) ÷ (L2 + 0.05) with the lighter color on top.
The thresholds are 4.5:1 for normal text at AA (7:1 at AAA), and 3:1 for large text (18pt and up) at AA (4.5:1 at AAA). Black on white reaches the maximum of 21:1, while light gray text on white fails the thresholds and becomes hard to read for many users.
The pass/fail check is a mechanical comparison against WCAG numbers. Real readability also depends on font weight and typeface, so confirm the final rendering even when the ratio passes. All computation runs locally in your browser and your colors are never transmitted.
FAQ
How is the contrast ratio calculated?
This tool computes it from the relative luminance of your text and background colors per the WCAG 2.x definition. Black on white reaches the maximum ratio of 21:1.
What ratio counts as passing?
Normal text needs 4.5:1 for AA (7:1 for AAA). Large text (18pt and up) needs 3:1 for AA (4.5:1 for AAA).
Can text still be hard to read even when it passes?
Yes. Font weight, size and typeface also affect readability. Treat the thresholds as a minimum and check the final rendering too.
Are the colors I enter sent anywhere?
No. All computation happens locally in your browser and nothing you enter is transmitted.
Related guide
GuideHow to Choose a Color Scheme: The Basics
How to choose a color scheme: complementary, analogous, triadic and monochrome combinations, the 60-30-10 rule, and text contrast basics.
GuideHow to Check Contrast Ratio: WCAG Standards
How to check contrast ratio: relative luminance in WCAG 2.x, the AA and AAA thresholds (4.5:1, 3:1, 7:1), common color pair examples, and fixes.
Related Tools
Color Palette Generator
Generate palettes from a base color using complementary, analogous, triadic and monochrome schemes. Copy HEX, RGB and HSL codes for your designs.
Color Converter
Convert between HEX, RGB and HSL. Pick colors directly with the color picker.
Text Converter
Convert case (lowercase, uppercase, title case) and clean up text: remove blank lines, trim spaces, and count characters, lines and UTF-8 bytes.
Image Compressor
Compress image files and compare the result as you adjust quality and dimensions for websites or social media.
All processing happens in your browser. Your files are never uploaded.
Verified: Known ratios, the conformance table, swap and error states are covered by browser tests
Did you know?
Black on white reaches the maximum contrast ratio of 21:1. The commonly cited 4.5:1 readability threshold is far below that theoretical ceiling.