A color contrast checker tests the difference in luminance between a foreground text color and its background to ensure readability for all users, including those with visual impairments. The WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios that websites must meet to comply with accessibility standards like ADA, Section 508, and EN 301 549. Use this free tool to instantly verify whether your color combinations pass WCAG 2.1 Level AA or AAA requirements.
Accepts hex, rgb(), or hsl() formats
Accepts hex, rgb(), or hsl() formats
Large Text Preview (24px Bold)
This is a sample of normal body text at the default size. Good contrast ensures that all users, including those with visual impairments, can read your content comfortably. Check the badges to see if your color combination passes WCAG requirements.
Understanding WCAG Color Contrast and How to Use This Tool
Color contrast is one of the most important factors in web accessibility. The Web Content Accessibility Guidelines (WCAG) 2.1, published by the World Wide Web Consortium (W3C), define specific minimum contrast ratios that text must meet against its background color. These ratios ensure that people with low vision, color blindness, or other visual impairments can read your content without difficulty. Poor color contrast is consistently one of the most common accessibility failures found on websites worldwide.
To use this tool, enter your foreground (text) color and background color using the color pickers or by typing a value directly. The tool accepts standard hex codes like #FF5733, RGB notation like rgb(255, 87, 51), and HSL notation like hsl(14, 100%, 60%). As you change either color, the contrast ratio and compliance badges update instantly so you can see results in real time.
The contrast ratio is displayed as a number followed by :1, such as 4.5:1 or 7.2:1. A ratio of 1:1 means the two colors are identical (no contrast at all), while the maximum possible ratio is 21:1 (pure black on pure white). WCAG defines two conformance levels. Level AA requires a minimum ratio of 4.5:1 for normal-sized text and 3:1 for large text. Level AAA, the enhanced standard, requires 7:1 for normal text and 4.5:1 for large text. Large text is defined as at least 18 points (24 CSS pixels) regular weight or 14 points (roughly 18.66 CSS pixels) bold.
The four compliance badges beside the contrast ratio tell you at a glance whether your color pair passes or fails each WCAG threshold. Green badges with "Pass" mean the combination meets that criterion, while red "Fail" badges indicate the contrast is too low. Aim for at least AA compliance for all text on your site. If your chosen colors fail, the tool automatically suggests the nearest passing alternative colors by adjusting lightness while preserving the hue and saturation of your original choice.
The live preview panel on the right shows exactly how your text will look on the chosen background. Both large and normal text samples are displayed so you can visually assess readability alongside the numeric results. Use the swap button to quickly reverse the foreground and background colors when experimenting with different combinations. Designers frequently use this tool during the design process to verify that brand colors meet accessibility standards before development begins, saving time and ensuring compliance from the start.
For a detailed walkthrough, see our guide: Color Accessibility Guide: Fix WCAG Contrast Failures Without Ruining Your Design.
FAQ
What is a WCAG contrast ratio and why does it matter?
A WCAG contrast ratio measures the difference in perceived brightness between two colors, expressed as a ratio like 4.5:1. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios to ensure text is readable for people with low vision or color deficiencies. Poor contrast can make content inaccessible to millions of users and may also violate legal accessibility requirements such as the ADA and Section 508.
What is the difference between WCAG AA and AAA compliance?
WCAG AA is the standard level of accessibility compliance, requiring a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. Most organizations target AA compliance as a minimum. AAA provides better accessibility but is harder to achieve, especially with brand colors.
What counts as large text under WCAG guidelines?
Under WCAG 2.1, large text is defined as text that is at least 18 points (24 CSS pixels) in regular weight, or at least 14 points (approximately 18.66 CSS pixels) in bold weight. Large text has a lower contrast requirement because bigger letters are inherently easier to read. If your text does not meet these size thresholds, it is considered normal text and must meet the higher contrast ratio.
How is the contrast ratio calculated?
The contrast ratio is calculated using the relative luminance of two colors. First, each sRGB color channel value is linearized by applying a gamma correction formula. Then the relative luminance is computed as L = 0.2126 * R + 0.7152 * G + 0.0722 * B. Finally, the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. The result ranges from 1:1 (no contrast) to 21:1 (black on white).
What should I do if my color combination fails the contrast check?
If your colors fail the contrast check, you have several options. You can darken the text color or lighten the background (or vice versa) until the ratio passes. This tool suggests the nearest passing colors automatically. You can also increase the font size to qualify as large text, which has a lower contrast requirement. Another option is to add a semi-transparent overlay behind text placed on images. Always test your final colors with real users when possible.