Contrast Checker
Check color contrast ratios for WCAG AA and AAA accessibility. Enter text and background colors to instantly verify compliance.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
21:1
Contrast Ratio
| WCAG AA | WCAG AAA | |
|---|---|---|
| Normal Text | ||
| Large Text |
How It Works
- Enter your text color as a HEX code (e.g. #333333) or pick it using the color picker.
- Enter your background color the same way.
- Click the check button to instantly calculate the contrast ratio.
- Review the results to see if they pass WCAG AA or AAA compliance levels.
- Adjust the colors as needed until you reach the desired accessibility standard.
Example
Input: Text color: #1a1a1a, Background color: #ffffff
Result: Contrast ratio: 19.32:1 — Passes WCAG AA and AAA for both normal and large text
FAQ
A contrast ratio measures the difference in luminance between two colors. It ranges from 1:1 (no contrast) to 21:1 (black on white). Higher contrast makes text easier to read, especially for users with low vision or color blindness.
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. AA is the standard legal requirement in most jurisdictions.
Your data is completely private. All processing is done client-side in your browser — no color values or any other data are ever sent to any server. You can use this tool with full confidence.
The tool supports HEX codes (e.g. #ffffff), RGB values (e.g. rgb(255,255,255)), and you can also use the visual color picker. All formats produce the same accurate contrast calculation.
Yes. While WCAG has specific rules for text contrast, the tool can also help you evaluate contrast for UI components and graphical elements, which require at least a 3:1 contrast ratio under WCAG AA.