Contrast Checker: Check color contrast against WCAG
The Contrast Checker calculates the WCAG contrast ratio from your text and background colors (e.g. 4.48:1 for #777777 on white), shows whether they pass AA and AAA, and suggests the closest color that passes AA if they fail. Free, no sign-up, right in your browser.
Built by Justin Schuessler
Contrast checked? Take your site online with fast, reliable web hosting.
Contrast ratio
21.00:1
Normal text
The quick brown fox jumps over the lazy dog.
Large text
The quick fox
Continue with these colors: Check foreground color in Color Blindness Simulator · Generate a color scheme from the foreground color
Built with privacy in mind. Your input is processed in your browser and isn't sent to a server.
Example result
What the result looks like in the Contrast Checker
You enter text and background colors, and the tool calculates the contrast ratio, checks all WCAG levels, and, if they aren't met, suggests the closest color that meets AA. The colors below are an example; your result depends on your colors.
Example · #777777 on #ffffff
Fails AA for normal text- Contrast ratio
- 4.48:1
- Minimum AA requirement for normal text: 4.5:1.
- Levels passed
- 2/5
- Passed: AA – Large text (3:1), UI components & graphics (3:1)
- Suggested foreground color
- #767676
- Reaches 4.54:1 and thus AA for normal text, with the smallest change in brightness.
How to read the result
Each WCAG level has a fixed minimum; the 4.48:1 example is checked against each one separately.
| WCAG level | Example |
|---|---|
| AA – Normal text (4.5:1) | Failed |
| AA – Large text (3:1) | Passed |
| AAA – Normal text (7:1) | Failed |
| AAA – Large text (4.5:1) | Failed |
| UI components & graphics (3:1) | Passed |
Features
More than a contrast calculator: what the Contrast Checker tests
Sufficient color contrast makes text and controls readable for people with low vision and in poor lighting. The Contrast Checker shows whether your combination meets WCAG thresholds and helps you improve it.
Five WCAG checks at a glance
For each color combination, the tool shows whether normal and large text pass AA and AAA, and whether UI components and graphics meet the minimum 3:1 contrast ratio.
Color suggestion in one click
If the contrast fails AA for normal text, the tool suggests the closest color that reaches 4.5:1. It changes only the lightness of the text or background color, whichever needs less adjustment.
Hex, RGB, and color picker
Enter colors as three- or six-digit hex values with or without #, as rgb() or rgba(), or as plain values like 34, 34, 34—or select them with the color picker.
Live preview for normal and large text
Two preview cards show sample text in normal and large type using your colors.
Shareable link
The current colors are automatically included in the URL. Copy the link to open the same combination—handy for discussing it with your team.
Calculated in your browser
The contrast ratio is calculated directly in your browser. Your colors are not sent to a server.
WCAG thresholds
What contrast ratio do you need under WCAG?
The Contrast Checker tests your colors against these five minimum thresholds. AA is the usual minimum standard; AAA is the stricter level for especially readable content.
| WCAG level | Minimum contrast | Applies to |
|---|---|---|
| AA – Normal text (4.5:1) | 4.5:1 | Body text and labels below the large-text threshold |
| AA – Large text (3:1) | 3:1 | Text at least 24 px (18 pt), or bold text at least 18.66 px (14 pt) |
| AAA – Normal text (7:1) | 7:1 | Body text at the stricter, optional level |
| AAA – Large text (4.5:1) | 4.5:1 | Large text at the stricter, optional level |
| UI components & graphics (3:1) | 3:1 | Input borders, icons, and other graphical elements (WCAG 1.4.11) |
Want to check whether your colors remain distinguishable for people with color vision deficiency? The Color Blindness Simulator shows how a color appears with different forms of color blindness. Go to the Color Blindness Simulator
How it works
Check color contrast in 6 steps
From text and background colors to an accessible combination you can copy or share.
Step 1
Enter text color
Enter the text color as a hex or RGB value in the “Foreground (Text)” field, or select it with the color picker.
Step 2
Enter background color
Enter the background color in the “Background” field the same way. Use the arrow button between the fields to swap the foreground and background colors.
Step 3
Read the contrast ratio
Read the contrast ratio and check the five badges for AA and AAA for normal and large text, and for UI components and graphics. A checkmark means pass; a cross means fail.
Step 4
Check preview
Use the preview to see how normal and large sample text looks with your color combination.
Step 5
Apply color suggestion
If the combination fails AA for normal text, click “Suggest closest passing color,” then “Apply.”
Step 6
Copy or share colors
Copy the hex value with the copy button next to the field, or share the URL from the address bar, which includes both colors.
Discover more
More color tools
Color Blindness Simulator
Simulate live how color palettes and your own images appear to people with protanopia, deuteranopia, tritanopia, and achromatopsia—all calculated in your browser.
Built by Justin Schuessler
Color Scheme Generator
Generate complementary, analogous, triadic, and other color schemes live from a base color—nothing is stored or transmitted.
Built by Justin Schuessler
Color Picker
Convert colors between HEX, RGB, HSL, HSV, and CMYK in real time, find the closest CSS named color, and check WCAG contrast against black and white—all in your browser.
Built by Justin Schuessler
Image color picker
Extract a color code from an image: eyedropper with magnifier, HEX, RGB, and HSL values, the image's color palette, and a contrast tip. The image stays in your browser.
Built by Dimitri Heissler
FAQ
Frequently asked questions about the Contrast Checker
Brief answers about color contrast, WCAG, and this tool.
The Contrast Checker is free to use without signing up. The contrast ratio is calculated directly in your browser; your colors are not sent to a server.
Using the WCAG 2.x formula, the tool first calculates the relative luminance (L) of both colors, then divides the lighter color’s L plus 0.05 by the darker color’s L plus 0.05. The result ranges from 1:1 (identical colors) to 21:1 (black on white); the order of the colors does not matter. The higher the value, the easier the text is to read against the background.
For AA, normal text needs a contrast ratio of at least 4.5:1 and large text 3:1. The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. UI components and graphics such as input borders or icons need 3:1. Most legal requirements refer to AA; AAA is an optional, stricter level.
Text is considered large from 18pt (24px), or from 14pt (18.66px) if bold. Large text has lower minimum contrast requirements (3:1 instead of 4.5:1 for AA) because larger text remains legible at lower contrast.
Three- or six-digit hex values with or without # (#fff or #ffffff), rgb() and rgba(), and plain values like 34, 34, 34. You can also select either color with the color picker. For rgba(), the alpha value is ignored; the tool uses the opaque color. Invalid input is highlighted until you enter a valid value.
If your combination fails AA for normal text (4.5:1), click to get a suggestion for the closest color that passes. The tool changes only the lightness of the text or background color, whichever needs less adjustment. Click “Apply” to use the suggestion. For example, #777777 on #ffffff has a ratio of 4.48:1, while the suggested #767676 reaches 4.54:1.
Yes. The Contrast Checker automatically adds the current foreground and background colors to the URL. Copy the link from the address bar to open the same combination. The links below the preview also let you send the foreground color to the Color Blindness Simulator or Color Scheme Generator.
Laws such as the European Accessibility Act (EAA) and its national implementations, or the ADA in the US, require many websites and apps to meet minimum accessibility standards and generally refer to WCAG. Sufficient text contrast is one of the most commonly checked criteria. This tool is not legal advice, but it helps you check the technical WCAG contrast requirements yourself.
Any more questions?
Contact SupportYour next project needs a reliable server behind it
A ZAP-Hosting VPS reliably puts your website or application online.
No setup. No risk. Online in seconds.
Looking for more tools? View all image and design tools