Calculate WCAG contrast ratios between text and background colors. Check accessibility compliance for AA and AAA standards with hex, RGB, and HSL input.
The Contrast Ratio Calculator checks whether your text and background color combinations meet WCAG (Web Content Accessibility Guidelines) standards. Adequate color contrast is essential for readability, especially for users with visual impairments, color blindness, or those viewing content in challenging lighting conditions. It is one of the simplest accessibility checks you can do before a design goes live. It also helps you balance accessibility with the visual style you want to keep. A quick ratio check can prevent a palette from looking good in mockups but failing in real use, which saves time during design review.
WCAG 2.1 defines specific contrast ratio requirements: Level AA requires 4.5:1 for normal text and 3:1 for large text, while Level AAA requires 7:1 for normal text and 4.5:1 for large text. These ratios are calculated from the relative luminance of the foreground and background colors.
This tool accepts colors in hex, RGB, and HSL formats, provides instant contrast ratio calculations, and clearly indicates pass/fail status for all WCAG levels. It also suggests the closest compliant color alternatives when your chosen combination fails, helping you maintain your design aesthetic while meeting accessibility requirements.
Use this calculator when you need to check whether a foreground and background pair is readable and WCAG-compliant. It is helpful during design review, component creation, and accessibility audits. That makes it easier to catch contrast failures before they reach users and to choose accessible alternatives before a palette is finalized.
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 is the darker's. Relative Luminance = 0.2126 × R + 0.7152 × G + 0.0722 × B, where each channel is linearized: if sRGB ≤ 0.03928, linear = sRGB/12.92; else linear = ((sRGB + 0.055)/1.055)^2.4.
Result: 12.63:1 — Passes AAA
Dark gray (#333333) on white (#FFFFFF) produces a contrast ratio of 12.63:1, well exceeding the strictest AAA requirement of 7:1 for normal text.
The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility, developed by the W3C. Contrast requirements ensure that text is readable by people with moderately low vision (roughly 20/40 acuity) without assistive technology. The guidelines define two conformance levels with different ratio thresholds.
Level AA (minimum) requires 4.5:1 contrast for normal text and 3:1 for large text. Level AAA (enhanced) requires 7:1 and 4.5:1 respectively. Large text is defined as 18pt (24px) or 14pt bold (18.66px bold). Many countries have laws requiring AA compliance for government and public-facing websites.
Human color perception is not uniform across the visible spectrum. We're most sensitive to green light, moderately sensitive to red, and least sensitive to blue. The sRGB luminance formula (0.2126R + 0.7152G + 0.0722B) reflects these perceptual weights. Additionally, the gamma correction in sRGB encoding must be linearized before calculating luminance, which is why the formula includes the piecewise power function.
Building an accessible color palette requires systematic thinking. Start by choosing your primary, secondary, and accent colors, then verify that every text/background combination in your design meets at least AA standards. Many design systems include accessibility metadata for each color, indicating which combinations are compliant. Tools like this calculator should be integrated into your design workflow from the start, not applied as an afterthought.
AA level: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold). AAA level: 7:1 for normal text, 4.5:1 for large text. AA is the minimum legal requirement in many jurisdictions.
Relative luminance is a measure of a color's brightness on a scale from 0 (black) to 1 (white), weighted by human perception (green contributes most, blue least). It accounts for the nonlinear gamma curve of sRGB displays.
WCAG contrast requirements primarily apply to text and text images. However, WCAG 2.1 added requirements for non-text contrast (icons, form controls) at 3:1 minimum. That means many interface elements need contrast checks too, especially when an image is being used to communicate information instead of decoration.
Color contrast ratio is based on luminance, not hue, so it accounts for most color vision deficiency scenarios. However, you should also avoid relying solely on color to convey information.
While 4.5:1 meets AA requirements, higher contrast is better. AAA (7:1) provides better readability for users with moderate visual impairments. Some experts recommend targeting 7:1 whenever possible.
The same contrast requirements apply to dark mode. White (#FFFFFF) on pure black (#000000) gives 21:1 but can cause eye strain. Consider off-white on dark gray (e.g., #E0E0E0 on #1A1A1A) for better comfort.