Accessibility Contrast Optimizer WCAG
Check a text/background color pair against WCAG 2.1 AA and AAA contrast ratios (4.5:1, 3:1, 7:1) by font size and weight, with suggested passing colors.
Accessibility Contrast Optimizer WCAG
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser — no data is sent to any server.
Formula: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Worked example — Contrast ratio = 11.59:1 | Passes both AA and AAA
Formula
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
The contrast ratio is calculated using the relative luminance (L) of two colors. L1 is the lighter color's luminance and L2 is the darker. Relative luminance uses the formula L = 0.2126R + 0.7152G + 0.0722B after linearizing sRGB values. Ratios range from 1:1 (no contrast) to 21:1 (maximum).
Worked Examples
Example 1: Corporate Website Body Text
Problem:Check if dark gray (#333333) text on a light gray (#f5f5f5) background meets WCAG AA for 16px normal text.
Solution:Foreground luminance: L2 = 0.0331 (darker) Background luminance: L1 = 0.9131 (lighter) Contrast ratio = (0.9131 + 0.05) / (0.0331 + 0.05) = 11.59:1 AA requires 4.5:1 for normal text → PASSES AAA requires 7:1 → PASSES
Result:Contrast ratio = 11.59:1 | Passes both AA and AAA
Example 2: Button with Insufficient Contrast
Problem:A light blue button (#87CEEB) with white text (#FFFFFF). Does it meet WCAG AA for 14pt bold text, which counts as large text at about 18.66px?
Solution:Foreground luminance: L1 = 1.0000 (white) Background luminance: L2 = 0.5529 (light blue) Contrast ratio = (1.0000 + 0.05) / (0.5529 + 0.05) = 1.74:1 Large text AA requires 3:1 → FAILS Suggestion: darken the background to #4A90A4, which lands at 3.61:1 and clears both the 3:1 large-text floor and the 3:1 non-text floor
Result:Contrast ratio = 1.74:1 | FAILS AA even for large text
Frequently Asked Questions
What are the WCAG contrast ratio requirements?
The Web Content Accessibility Guidelines (WCAG) define specific contrast ratio minimums for text readability. WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA, the highest standard, requires 7:1 for normal text and 4.5:1 for large text. For non-text elements like icons, form borders, and graphical objects, WCAG 2.1 requires a minimum 3:1 contrast ratio. These ratios are calculated using the relative luminance of the foreground and background colors and ensure readability for users with low vision or color deficiencies.
How is color contrast ratio calculated?
The contrast ratio is calculated using the relative luminance of two colors. First, each color's sRGB values are converted to linear RGB by applying a gamma correction formula. Then, relative luminance is computed as L = 0.2126R + 0.7152G + 0.0722B, weighting green highest because human eyes are most sensitive to green light. The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance. The 0.05 offset prevents division by zero and accounts for ambient light. The ratio ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).
What is the difference between WCAG 2.1 and WCAG 3.0 contrast?
WCAG 2.1 uses the traditional contrast ratio formula based on relative luminance, which has known limitations — it can sometimes pass colors that are hard to read or fail colors that are perfectly legible. WCAG 3.0 (formerly Silver) introduces the Advanced Perceptual Contrast Algorithm (APCA), which better models human vision by considering font size, weight, and the polarity of text (light text on dark vs. dark text on light). APCA recognizes that thin fonts need more contrast and that light text on dark backgrounds requires more contrast than dark text on light backgrounds. While WCAG 3.0 is still in development, APCA is gaining adoption as a more perceptually accurate contrast measure.
How does color blindness affect contrast perception?
Color blindness affects approximately 8% of men and 0.5% of women worldwide. The most common types are deuteranopia and protanopia (red-green color blindness), which make it difficult to distinguish between reds, greens, browns, and oranges. Tritanopia (blue-yellow color blindness) is rarer. While the WCAG contrast ratio formula measures luminance contrast rather than color difference, relying solely on color to convey meaning still excludes color-blind users. Best practices include using sufficient luminance contrast (not just color contrast), adding patterns or labels to color-coded elements, avoiding problematic color pairs like red-green, and testing designs with color blindness simulation tools.
Why is accessibility contrast important for web design?
Accessible contrast is crucial because approximately 2.2 billion people worldwide have some form of vision impairment, including low vision, color blindness, and age-related decline. Poor contrast makes content unreadable for these users, effectively excluding them from digital services, information, and opportunities. Beyond inclusivity, accessible contrast benefits everyone — screens viewed in bright sunlight, aging displays, and tired eyes all benefit from good contrast. Additionally, many countries now mandate digital accessibility through legislation like the ADA, EU Accessibility Act, and Section 508. Non-compliant websites risk lawsuits and fines. Designing with proper contrast from the start is also more cost-effective than retrofitting accessibility later.
Why does Accessibility Contrast Optimizer WCAG treat 18.66px bold and 24px as the large-text threshold?
WCAG defines large text as 18 point, or 14 point when bold. CSS converts points to pixels at a ratio of 96/72, so 18pt lands at 24px and 14pt bold at about 18.66px, which is why those two numbers gate the switch here. Once text qualifies as large, the Level AA floor drops from 4.5:1 to 3:1 and AAA from 7:1 to 4.5:1, because thicker glyph strokes deliver more luminance signal to the eye. The rule keys on rendered size, not on a declared value elsewhere in the cascade.
Which text is exempt from the WCAG contrast minimum?
Success Criterion 1.4.3 carves out a short list of incidental cases: text that is part of an inactive or disabled user interface component, text used as pure decoration, text that is not visible to anyone, and text that forms part of a picture containing significant other visual content. Logotypes and brand names as they appear in a logo are also exempt. Everything else, including placeholder text, footnotes and helper copy, must meet the ratio, so treat the exemptions narrowly.
How does relative luminance differ from HSL lightness or perceived brightness?
HSL lightness is computed straight from gamma-encoded sRGB values, so it says nothing about how much light a color actually emits. Relative luminance linearizes each channel first, then weights them 0.2126 red, 0.7152 green and 0.0722 blue. Pure blue and pure yellow both sit at 50% HSL lightness, yet their relative luminances are 0.0722 and 0.9278 respectively. That gap explains why choosing colors by eye on a lightness slider so often produces pairs that fail the ratio test.
How do I check contrast for text sitting on a photo or a gradient?
A single ratio is not enough, because the background luminance changes underneath the glyphs. Sample the lightest and the darkest pixels that fall behind the text and evaluate the worse of the two: the type has to clear the threshold everywhere it overlaps, not on average. The dependable fixes are a solid or semi-opaque scrim behind the text, a duotone treatment that compresses the image luminance range, or moving the copy into a plain panel. Text shadows aid perception but are not measurable under the 2.1 formula.
How can I fix a failing combination without abandoning the brand color?
Contrast depends on luminance rather than hue, so you can usually keep the hue and move only its lightness. Darkening a brand blue for text on white, or lightening it for text on a dark surface, preserves recognition while raising the ratio. Other levers are inverting the pair, adding weight or size to reach the 3:1 large-text tier, and reserving the untouched brand color for icons, borders and other non-text elements, where SC 1.4.11 asks for 3:1 rather than 4.5:1.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer · Editorial policy
Related Calculators
📢Ad Campaign Frequency Cap Optimizer
Optimize ad frequency caps to maximize reach and minimize fatigue
🎧Contact Center AHT Optimizer
Optimize Average Handle Time (AHT) and estimate staffing cost savings from efficiency gains
💰Dynamic Pricing Rule Optimizer
Set optimal floor and ceiling prices for dynamic pricing rules to maximize yield
🔧Maintenance Spares Optimizer
Optimize spare parts inventory using MTBF and Lead Time demand
📅Financial Close Process Optimizer
Optimize month-end close timeline and identify bottlenecks
📢Google Ads Pacing Optimizer
Track ad budget pacing and forecast monthly spend and CPA
💹Gross Margin & COGS Optimizer
Analyze gross margin, break down COGS, and model optimization scenarios
📦Inventory Carrying Cost Optimizer
Calculate total inventory carrying costs and model reduction scenarios
🧮Class Timetable Optimizer Constraints
Calculate class timetable optimizer constraints with inputs, formulas, and instant results.