Web accessibility is often treated as an afterthought or a compliance chore. But poor visual contrast directly locks out millions of users from reading your content or navigating your website. Whether someone is dealing with permanent low vision, age-related visual decline, or simply trying to read their phone screen under the glaring midday sun, contrast ratio determines if a user interface remains usable.
The Web Content Accessibility Guidelines (WCAG) establish clear mathematical formulas for readability. Instead of guessing if your body text or button color stands out enough, you can measure compliance precisely using relative luminance and contrast ratios — no sign-up, no account, completely free in your browser.
Test Color Contrast Online
Color Contrast Calculator
Check foreground and background color contrast ratios against WCAG AA and AAA accessibility standards with a live preview.
How to Use the Color Contrast Checker
Getting a contrast ratio takes about 30 seconds. Here is the exact workflow:
Step 1: Enter Your Foreground Color
Paste your text or icon color as a HEX value (e.g., #1E293B) into the foreground color field. You can also use the color picker to sample it visually.
Step 2: Enter Your Background Color
Paste the background color your text sits on top of (e.g., #F8FAFC). For elements like buttons, this is the button surface color, not the page background.
Step 3: Read the Contrast Ratio
The tool instantly outputs a ratio like 7.4:1. A higher number means better contrast. The scale runs from 1:1 (no contrast at all) to 21:1 (pure black on pure white).
Step 4: Check Your WCAG Level
Look at which standard your ratio meets:
- Fail — Does not meet any WCAG standard.
- AA — Meets the minimum legal requirement for most countries.
- AAA — Meets the gold standard for high-accessibility design.
Step 5: Adjust Until You Pass
If the result fails, lighten or darken one of the colors until the ratio reaches the required threshold. The tool updates the result in real time as you adjust.
Understanding WCAG Contrast Ratios
A contrast ratio measures the difference in perceived luminance (brightness) between a foreground color (your text or icons) and a background color. The scale runs from 1:1 (no contrast — white text on white) up to 21:1 (maximum contrast — black text on white).
Luminance is calculated using the relative brightness of each primary color channel (Red, Green, Blue) weighted according to how human eyes perceive them. Green appears significantly brighter to human eyes than blue or red, so the formula accounts for this asymmetry.
The Contrast Formula
The relative luminance ($L$) of any color is calculated after converting 8-bit sRGB color channels to a linear scale:
- For each channel ($R$, $G$, $B$), convert the value to a decimal between
0and1by dividing by255. - If the channel value is ≤
0.04045, divide it by12.92. Otherwise, add0.055, divide by1.055, and raise to the power of2.4. - Calculate relative luminance using the standard human-eye weightings:
$$L = 0.2126 \times R + 0.7152 \times G + 0.0722 \times B$$
Once you have the relative luminance of the lighter color ($L_1$) and the darker color ($L_2$), the contrast ratio is:
$$\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$
The constant 0.05 prevents division-by-zero and accounts for light scattering within the human eye.
WCAG Compliance Levels: AA vs. AAA
The World Wide Web Consortium (W3C) defines three levels of accessibility compliance: A, AA, and AAA. Level AA is the standard legal requirement in most jurisdictions. Level AAA represents the gold standard.
The required minimum ratios depend on the size and weight of the text:
| Text Type | Definition | Level AA | Level AAA |
|---|---|---|---|
| Normal Text | Under 18pt regular or under 14pt bold | 4.5:1 | 7:1 |
| Large Text | 18pt+ regular or 14pt+ bold | 3:1 | 4.5:1 |
| UI Components & Icons | Buttons, inputs, focus rings | 3:1 | Recommended |
Why Color Contrast Matters Beyond Compliance
Designing with sufficient contrast is not just about ticking a legal checkbox. It benefits several overlapping groups of users:
Visual Deficiencies: Roughly 8% of men and 0.5% of women worldwide have some form of red-green color blindness. Millions more live with low vision, cataracts, glaucoma, or macular degeneration, making subtle color differences impossible to distinguish.
Age-Related Decline: As human eyes age, the pupil shrinks, the lens yellows, and contrast sensitivity decreases. A 60-year-old eye receives roughly one-third the light of a 20-year-old eye under identical conditions. A design that looks beautiful to a 25-year-old designer may be genuinely difficult to use for a 65-year-old customer.
Situational Constraints: Everyone experiences situational visual impairments. Glare from sunlight on a phone screen, a dim office environment, a low-quality projector in a conference room — in each case, low-contrast text becomes unreadable long before it affects users with permanent vision conditions.
Common Contrast Pitfalls in Web Design
Many accessibility failures come from aesthetic trends that prioritize clean, minimal looks over usability. These are the most frequent mistakes to watch for:
1. Light Gray on White
Using light gray text (#767676 or lighter) on a white background is extremely common in modern UI design for metadata, placeholder text, or disabled states. The problem is that many of the grays developers reach for fail the 4.5:1 AA threshold. For example, #94A3B8 (a popular Slate gray from Tailwind's palette) has a contrast ratio of only 2.5:1 against white — barely a third of the minimum requirement.
As a quick rule: your placeholder and secondary text should be no lighter than #767676 on a white background if it needs to be readable at normal text sizes.
2. White Text on Branded Orange and Yellow
Orange and yellow are popular call-to-action colors, but white text on either of them consistently fails contrast audits:
- White text on
#F97316(Tailwind orange-500): 2.3:1 — fails. - White text on
#EAB308(Tailwind yellow-500): 1.5:1 — fails badly. - Black text on
#F97316: 8.7:1 — passes AAA.
To keep your branded button color and pass compliance, switch the button text to dark instead of white.
3. Text Placed Directly Over Images
Placing body text directly over a photographic background with no overlay is highly risky. Because a photo contains both light and dark areas, the text contrast ratio changes across the screen. Portions of the text will be readable and other portions will not — depending on whether the pixel beneath happens to be light or dark.
Fix: Apply a semi-transparent dark overlay via CSS before rendering white text on top:
/* Semi-transparent overlay ensures consistent contrast behind white text */
.hero-section {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url('hero-image.jpg');
color: #ffffff;
}
4. Placeholder Text as the Primary UI Feedback
Placeholder text disappears when a user starts typing. If error states, help text, or form instructions live only inside placeholder attributes, users cannot reference them mid-form. Additionally, placeholder text is styled by browsers at lower opacity than normal text, meaning it often fails contrast checks independently.
Privacy Note
Checking your colors involves working with HEX codes, palette ideas, or brand assets. FluxToolkit performs all contrast calculations entirely within your browser using client-side JavaScript. No color selections, text inputs, or design data are transmitted to our servers or stored in any database. It stays on your device.
Frequently Asked Questions
What is the minimum contrast ratio for normal text?
Under WCAG 2.1 Level AA, the minimum contrast ratio for normal text (under 18pt regular or 14pt bold) is 4.5:1. For Level AAA enhanced compliance, it is 7:1.
Does the contrast rule apply to disabled buttons?
No. WCAG guidelines explicitly exempt inactive (disabled) user interface elements and purely decorative text from contrast requirements. However, once a button becomes interactive or active, it must meet the standard contrast thresholds.
What size counts as "large text"?
WCAG defines large text as at least 18pt regular or 14pt bold. In standard web pixels (assuming 96 DPI), this is approximately 24px regular or 18.5px bold.
Does contrast ratio apply to logo text?
No. Text that forms part of a logo or brand mark has no minimum contrast requirements under WCAG. However, it is still best practice to maintain readable contrast so the logo functions well across different backgrounds.
Why do some contrast checkers show different ratios for the same colors?
Some tools use simplified or non-linear approximations rather than the precise WCAG relative luminance formula. FluxToolkit calculates luminance using the correct linearised sRGB transformation, so results match the official W3C specification exactly.
Is my color data sent to a server?
No. All calculations happen locally in your browser memory. Your design colors are private and never leave your device.
Try the Color Contrast Checker — No Sign-Up Required
You do not need an account to use this tool. Paste your colors, get your contrast ratio instantly, and move on. FluxToolkit is completely free, no sign-up, no account needed.
Related Articles
- Color Palette Generator: Build Beautiful Color Combinations — Create accessible color schemes from scratch.
- CSS Color Formats Guide — Master HEX, RGB, HSL, and OKLCH color codes.
- CSS Gradient Generator Guide — Ensure text readability on custom gradient backgrounds.
- Color Blindness Simulator: Test Accessibility — Preview how your palette appears to users with CVD.