Related Tools
How to Use
- 1Enter or pick a foreground (text) color using the color picker or by typing a hex code (e.g., #1a1a1a).
- 2Enter or pick a background color the same way.
- 3Read the live preview showing how the text looks at that color combination.
- 4Check the contrast ratio — if it fails WCAG AA (needs 4.5:1 for normal text), darken the text color or lighten the background until the ratio passes.
- 5Confirm AAA compliance (7:1 ratio) for critical UI text like form labels, navigation, and error messages.
- 6Note the large text thresholds: text at 18pt (24px) or larger, or 14pt bold or larger, only needs a 3:1 ratio for AA and 4.5:1 for AAA.
About Color Contrast Checker
The Color Contrast Checker calculates the contrast ratio between any two colors following the WCAG (Web Content Accessibility Guidelines) 2.1 standard and displays pass/fail results for both AA and AAA conformance levels. It uses the relative luminance formula defined in WCAG 2.1 Success Criterion 1.4.3 to compute an objective, standards-compliant contrast ratio between your foreground (text) and background colors. The formula converts sRGB color values to linear RGB, computes luminance using the ITU-R BT.709 coefficients (0.2126R + 0.7152G + 0.0722B), and produces a ratio ranging from 1:1 (identical colors) to 21:1 (pure black on pure white).
Web accessibility is not optional — it is a legal requirement in many jurisdictions. The Americans with Disabilities Act (ADA) in the United States, the European Accessibility Act (EAA) in the EU, the Accessibility for Ontarians with Disabilities Act (AODA) in Canada, and Section 508 of the Rehabilitation Act for U.S. federal agencies all reference WCAG as the technical standard for digital accessibility. High-profile lawsuits against companies like Domino's Pizza and Target have established precedent that websites must be accessible. Organizations that fail to meet these standards risk both legal liability and exclusion of users with disabilities.
The WCAG standard defines two conformance levels for color contrast. Level AA requires a minimum ratio of 4.5:1 for normal-sized text and 3:1 for large text (18pt/24px or larger, or 14pt/18.66px bold or larger). Level AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the minimum standard most organizations target and the level referenced by most accessibility laws; AAA provides enhanced accessibility for users with more severe visual impairments and is recommended for critical interface elements like form labels, error messages, navigation links, and call-to-action buttons where readability is paramount.
Approximately 8% of men and 0.5% of women have some form of color vision deficiency (color blindness), and millions more have low vision conditions such as macular degeneration, cataracts, and diabetic retinopathy that reduce contrast sensitivity. Poor color contrast does not just affect people with diagnosed conditions — it affects anyone reading a screen in bright sunlight, using a low-quality or aging display, viewing content on a projector in a lit room, or reading small text at arm's length on a mobile device. Ensuring adequate contrast is a universal usability improvement that makes your content readable for everyone in every environment.
Designers and front-end developers use this tool during the design phase to validate color palettes before implementation. Test your brand colors, button colors, link colors, hover states, placeholder text, disabled states, and error/success indicators against their backgrounds. If a combination fails, adjust the lightness of either color until it passes — the live preview makes it easy to find an accessible alternative that stays close to your original design intent. Many teams integrate contrast checking into their design system documentation to ensure that every color token in tools like Figma, Sketch, or Adobe XD meets WCAG requirements from the start.
All calculations run entirely in your browser using the WCAG luminance formula implemented in JavaScript. No data is transmitted to any server, making it safe for testing confidential branding colors, client design systems, unreleased product interfaces, and internal tools under NDA. The tool requires no installation, no account, and works offline after the initial page load.
Frequently Asked Questions
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is the international standard for making web content accessible to people with disabilities, published by the W3C (World Wide Web Consortium). WCAG 2.1, the current widely-adopted version, covers color contrast, text alternatives, keyboard navigation, and many other accessibility requirements. It is referenced by laws like the ADA, EAA, and Section 508.
What is the difference between AA and AAA?
AA is the baseline accessibility standard that most organizations are required or expected to meet. It requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. AAA is a stricter standard requiring 7:1 for normal text and 4.5:1 for large text. AAA provides better readability for users with low vision and is recommended for critical UI elements, but achieving AAA across an entire site can be challenging with some color palettes.
What counts as large text?
WCAG defines large text as 18pt (24px) or larger at regular weight, or 14pt (approximately 18.66px) or larger at bold weight. Large text has lower contrast requirements (3:1 for AA, 4.5:1 for AAA) because its size makes it inherently more readable. Most body text on the web is 14-16px, which falls under the normal text requirements.
Does this support RGB or HSL input?
The tool accepts hex color codes (like #1a1a1a or #fff). Use the built-in color picker for visual selection — it allows you to choose any color visually and automatically converts it to hex. For RGB or HSL values, convert them to hex first using our Hex/RGB Converter tool.
Why does color contrast matter for SEO?
Google's page experience signals include accessibility metrics. Poor contrast increases bounce rates (users leave when they cannot read the content), reduces engagement time, and can trigger accessibility audit failures in Lighthouse — a tool Google uses to evaluate page quality. While contrast is not a direct ranking factor, its effect on user behavior and page experience scores indirectly impacts search visibility.
How is the contrast ratio calculated?
The ratio is calculated using the relative luminance of each color, as defined in WCAG 2.1. Each color is converted from sRGB to linear RGB, then luminance is computed as L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. A ratio of 1:1 means no contrast (identical colors) and 21:1 is the maximum (black on white).
What if my brand colors fail the contrast check?
You have several options: darken the text color slightly while keeping the hue, lighten the background, use the brand color for decorative elements rather than text backgrounds, or add a semi-transparent overlay behind text placed on colored backgrounds. The goal is to find an accessible alternative that stays close to your brand identity. Small adjustments to lightness often achieve compliance without visible design changes.
Does this check contrast for non-text elements like icons and borders?
WCAG 2.1 Success Criterion 1.4.11 requires a minimum 3:1 contrast ratio for non-text UI components (icons, form field borders, focus indicators) and graphical objects. While this tool calculates the ratio between any two colors, the pass/fail thresholds displayed are for text contrast (SC 1.4.3). For non-text elements, compare the calculated ratio against the 3:1 threshold yourself.