Check color contrast ratios against WCAG accessibility standards. Ensure text and UI elements meet readability requirements for all users, including those with visual impairments.
2026-03-28T00:00:00Z
Preview (Large)
Normal text sample
Enter colors and click Calculate to see contrast results
WCAG 2.1 defines conformance levels with specific contrast requirements: AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold); AAA requires 7:1 for normal text and 4.5:1 for large text. Most organizations target AA as the baseline, as it is the minimum requirement in many accessibility laws (Section 508 in the US, EN 301 549 in the EU). AAA is a higher standard, recommended for government, healthcare, and educational content serving diverse audiences. WCAG Level A (the entry-level conformance) requires only 3:1 contrast for large text, but is rarely used in practice; nearly all professional projects target AA or AAA. Disabled form inputs are exempt from contrast requirements in WCAG 2.1, though best practice still applies to benefit users. Graphical UI components and interactive elements require 3:1 contrast under a separate rule. Exceptions include logos, flags, incidental text in images, and inactive UI; core content must always meet the target level.
WCAG 2.1 defines three levels. Level A is the baseline (rarely used in practice). Level AA requires 4.5:1 contrast for normal text (<18pt) and 3:1 for large text (≥18pt or ≥14pt bold). Level AAA is the gold standard: 7:1 for normal, 4.5:1 for large. Most organizations target AA compliance, which is legally mandated in many jurisdictions. AAA is recommended for critical content (healthcare, government). Text in images, videos, and decorative elements have different rules. Graphical UI components need only 3:1 contrast (separate from text rules).
Identify which color is the text/foreground (usually darker) and which is the background. Use color pickers or enter HEX codes directly. Common combinations: black (#000000) on white (#FFFFFF) achieves 21:1 (excellent). Dark gray (#595959) on white achieves 7.0:1 (AAA-compliant). Lighter grays (#AAAAAA) on white fail even AA. White text on dark blue (#1E3A8A) achieves 8.6:1 (AAA). Dark mode combinations often pass more easily than light-on-light. Test both normal and large text if your design uses mixed sizes.
The tool automatically calculates luminance using the sRGB formula: first, normalize RGB values (divide by 255). If channel ≤0.03928, linearize as channel/12.92, else ((channel+0.055)/1.055)²⋅4. Combine: L = 0.2126×R + 0.7152×G + 0.0722×B. This produces values 0 (black) to 1 (white). Perceptually, luminance differences matter more than raw color differences, so this formula accounts for human vision limits. Green contributes the most to perceived brightness, red less, blue least.
Using the two luminance values, apply: Ratio = (L_lighter + 0.05) / (L_darker + 0.05). Always place the lighter color's luminance first (numerator) to ensure ratio ≥1. The +0.05 offset prevents division by zero and accounts for display minimum brightness. Round to 2 decimal places for reporting. Example: L_white=1.0, L_gray=0.123 → (1.05)/(0.173) ≈ 6.07:1. Higher ratios indicate greater contrast. A ratio of 1:1 means identical colors (invisible); 21:1 is pure black on white (maximum).
Compare your ratio against WCAG levels: AA normal needs ≥4.5:1, AA large ≥3:1, AAA normal ≥7:1, AAA large ≥4.5:1. If you fail, adjust color lightness or saturation. Use browser DevTools accessibility checkers (Chrome, Firefox) to find problem areas in production. If brand colors don’t pass, use them for accents only; darken/lighten base colors for text. Test with color blindness simulators (Coblis, Colour Oracle) to verify contrast for red-green and blue-yellow deficiencies. Consider user preferences: offer high-contrast mode toggles for extreme accessibility needs.
Website redesign: verify that your dark gray body text on white background meets WCAG AA standards:
This is a common text+background combination in professional web design
Most websites should target AA (4.5:1 for normal text), the legal minimum in many jurisdictions. AAA (7:1) is recommended for government, healthcare, financial, and accessibility-critical interfaces. Small businesses often start with AA and upgrade to AAA for key pages. Evaluate your audience: accessibility concerns increase for sites serving elderly users or those with visual impairments.
Yes. UI components like buttons and icons must have 3:1 contrast with adjacent colors. Text labels follow the 4.5:1 rule. Icons used without text need the 3:1 standard. Decorative icons with no functional purpose are exempt. Disabled buttons are technically exempt, though WCAG 3.0 will likely change this.
The same standards apply regardless of order. White text on dark navy (#1E3A8A) needs 4.5:1 or 7:1, just like dark text on white. Light-on-dark (dark mode) can sometimes achieve better contrast more easily. Many users prefer dark mode for reduced eye strain, so supporting both light/dark themes and checking both improves accessibility.
Yes, but carefully. #767676 on white achieves 4.5:1 (passes AA). #595959 achieves 7.0:1 (passes AAA). #999999 (~6.0:1) passes AAA but is at the threshold. Avoid anything lighter than #999999 for body text; use darker grays for long-form content. Many design systems incorrectly use #999 for text, failing accessibility.
Use brand colors for accent elements (buttons, banners) but use compliant colors for body text. Darken or lighten the brand color to meet standards. For example, if brand blue is #3B82F6, darken it to #1E40AF for text on white (contrast: 5.1:1). A/B test to ensure brand recognition survives the modification.
Chrome/Edge DevTools: Right-click text, inspect, hover over the color swatch. The accessibility panel shows contrast ratio. Firefox: Similar access via Inspector. Browser extensions like Axe, WAVE, and Lighthouse add dedicated accessibility audits. Automated tools check entire pages in seconds, though manual testing catches edge cases and contextual issues.
WCAG 2.1 exempts disabled controls, but this is controversial. Low-contrast disabled states confuse users about whether a field exists or what its state is. WCAG 3.0 will likely require 3:1 contrast even for disabled elements. Proactively support 4.5:1 disabled states for better UX and future-proofing.
High contrast helps all types of vision, but color blindness requires more than contrast. Avoid red-only or green-only indicators; use patterns, icons, or text labels instead. Test with simulators (Coblis, Colour Oracle). Red-green blindness (~8% of men, <1% of women) sees reds and greens as browns/yellows; blue-yellow affects <1% of people.
Related Tools