Check contrast ratios against AA (4.5:1) and AAA (7:1) standards for both normal and large text.
Get instant pass/fail results and automatic suggestions for accessible color alternatives.
All calculations happen in your browser. No data is sent to any server, ever.
See how your text and background colors look together with real-time preview panels.
17.06:1
Normal text (16px) — The quick brown fox jumps over the lazy dog. This sample text demonstrates how your color combination looks at regular body text size used throughout websites and applications.
Large text (24px bold) — The quick brown fox jumps over the lazy dog.
Color contrast is one of the most fundamental aspects of web accessibility and digital design. It refers to the difference in luminance or perceived brightness between two colors placed adjacent to each other, typically text displayed on a background. When contrast is insufficient, text becomes difficult or impossible to read for many users, including those with low vision, color blindness, cataracts, or age-related visual decline. According to the World Health Organization, at least 2.2 billion people globally have some form of near or distance vision impairment, making accessible color choices a matter that affects a significant portion of every website's potential audience.
The concept of contrast ratio provides a standardized, mathematical way to measure how distinguishable two colors are from each other. Rather than relying on subjective human judgment, which varies greatly between individuals and environmental conditions, contrast ratios give designers and developers an objective metric they can test against established thresholds. This objectivity is crucial for legal compliance, consistent user experiences, and inclusive design practices that benefit everyone regardless of their visual abilities.
Our Color Contrast Checker tool implements the exact algorithms specified in the Web Content Accessibility Guidelines (WCAG) 2.1, published by the World Wide Web Consortium (W3C). It calculates the relative luminance of your chosen foreground and background colors, then computes the contrast ratio using the standard formula. The tool instantly shows you whether your color combination passes or fails at each WCAG conformance level, for both normal and large text sizes. When a combination fails, it suggests the closest accessible alternative by adjusting the foreground color lightness while preserving its hue and saturation.
The Web Content Accessibility Guidelines define two conformance levels for color contrast: Level AA and Level AAA. Level AA is considered the minimum acceptable standard and is the level most commonly referenced by accessibility laws and regulations worldwide. Level AAA provides enhanced accessibility and is recommended for critical content, government websites, and organizations committed to the highest level of inclusivity.
For Level AA conformance, normal text must have a contrast ratio of at least 4.5:1 against its background. Normal text is defined as text smaller than 18 points (24 CSS pixels) at regular weight, or smaller than 14 points (approximately 18.66 CSS pixels) at bold weight. Large text, which meets or exceeds those size thresholds, requires a minimum contrast ratio of 3:1. The rationale for the lower requirement for large text is that larger characters have thicker strokes and wider proportions, making them inherently more legible even at lower contrast levels.
Level AAA raises these thresholds significantly. Normal text must achieve a contrast ratio of at least 7:1, and large text must meet 4.5:1. While AAA conformance is not always practical for every element on a page, especially for brand colors that may not naturally achieve such high contrast, it represents the gold standard for text readability. Organizations such as government agencies, healthcare providers, educational institutions, and financial services companies often aim for AAA compliance on their most critical content to ensure the widest possible audience can access their information.
It is important to note that WCAG contrast requirements apply to text content, including images of text, but do not apply to purely decorative elements, logos, or inactive user interface components. However, non-text elements like icons, form field borders, and focus indicators have their own contrast requirements under WCAG 2.1 Success Criterion 1.4.11, which specifies a minimum 3:1 contrast ratio for user interface components and graphical objects that are necessary for understanding the content.
The contrast ratio formula specified by WCAG is rooted in color science and human vision research. The calculation begins by converting the sRGB color values (the standard color space used by web browsers and most displays) into linear light values. This step, called linearization or inverse gamma correction, is necessary because sRGB applies a nonlinear transfer function (gamma encoding) to map linear light intensities to digital values. Without removing this encoding, the mathematical relationship between pixel values and actual emitted light is distorted, leading to inaccurate luminance calculations.
The linearization formula handles two ranges: for sRGB values at or below 0.03928, the linear value equals the sRGB value divided by 12.92. For values above 0.03928, the formula is ((sRGB + 0.055) / 1.055) raised to the power of 2.4. This piecewise function accurately models the sRGB transfer curve, which was originally designed to approximate the gamma characteristics of CRT monitors while maintaining good shadow detail.
Once the RGB channels are linearized, relative luminance is calculated using the formula: L = 0.2126 * R + 0.7152 * G + 0.0722 * B. These coefficients reflect the spectral sensitivity of the human visual system. The green channel receives the highest weight (0.7152) because human eyes contain far more green-sensitive cone cells than red or blue-sensitive ones, and because the peak sensitivity of human photopic vision falls squarely in the green portion of the spectrum, around 555 nanometers. The red coefficient (0.2126) is second, and blue (0.0722) receives the lowest weight because human eyes are least sensitive to blue light under normal viewing conditions.
The final contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The 0.05 offset in both numerator and denominator accounts for ambient light reflected from the screen surface and ensures that the ratio remains finite even when one color is pure black (luminance of 0). This produces a value between 1:1 (no contrast) and 21:1 (maximum contrast between pure white and pure black). The formula was validated through extensive testing with users who have various types of visual impairments to ensure that the threshold ratios align with real-world readability.
Accessibility is not merely a best practice; it is a legal requirement in many jurisdictions around the world. In the United States, the Americans with Disabilities Act (ADA) has been interpreted by courts to apply to websites and digital services, with WCAG 2.1 Level AA commonly referenced as the technical standard. Section 508 of the Rehabilitation Act explicitly requires federal agencies and their contractors to meet WCAG 2.0 Level AA for all information and communication technology. Additionally, individual states including California, New York, and Illinois have enacted their own digital accessibility laws.
The European Accessibility Act (EAA), which takes effect across EU member states, mandates accessibility for a wide range of digital products and services including e-commerce websites, banking applications, e-books, and transport services. The act references the European standard EN 301 549, which incorporates WCAG 2.1 Level AA requirements. Non-compliance can result in fines, market access restrictions, and enforcement actions by national authorities. Similarly, the Accessibility for Ontarians with Disabilities Act (AODA) in Canada, the Disability Discrimination Act in Australia, and the Equality Act in the United Kingdom all impose accessibility obligations that reference or align with WCAG standards.
The financial consequences of non-compliance extend beyond government fines. Web accessibility lawsuits in the United States have increased dramatically in recent years, with thousands of federal lawsuits and demand letters filed annually. Major retailers, restaurants, financial institutions, healthcare providers, and educational institutions have all faced costly litigation over inaccessible websites. Settlements and judgments frequently require organizations to remediate their websites, pay damages, cover plaintiff attorney fees, and submit to ongoing monitoring. Beyond legal costs, inaccessible websites exclude potential customers, damage brand reputation, and reduce the total addressable market.
Using a color contrast checker as part of your design and development workflow is one of the most straightforward steps you can take toward compliance. Color contrast issues are among the most common accessibility defects found in web audits, and they are also among the easiest to fix. By checking contrast ratios before publishing content, you can catch and resolve issues proactively rather than responding to complaints or legal actions after the fact.
Selecting colors that are both aesthetically pleasing and accessible requires a systematic approach. Start with your brand's primary colors and test their contrast ratios against the backgrounds you intend to use. If a brand color does not meet the required contrast ratio when used for text, adjust its lightness while keeping the hue and saturation as close to the original as possible. Our tool automates this process by suggesting the nearest accessible alternative when your current combination fails.
For body text, which is the most critical content on any page, aim for the highest contrast ratio you can achieve without creating visual discomfort. Pure black (#000000) on pure white (#FFFFFF) provides the maximum 21:1 ratio but can cause eye strain during extended reading sessions, especially on emissive displays. Many design systems use near-black (#1a1a2e, #212121, #333333) on white or very light gray (#f5f5f5, #fafafa) backgrounds, which typically provide ratios between 12:1 and 17:1, offering excellent readability without the harshness of maximum contrast. Similarly, off-white or light gray text on dark backgrounds (#121212, #1e1e1e) is gentler than pure white on pure black for dark mode interfaces.
For accent colors, interactive elements, and decorative text, you may need to make strategic compromises. A vibrant orange (#FF6600) might have a contrast ratio of only 3.5:1 against white, failing AA for normal text. You have several options: darken the orange to meet the threshold (e.g., #C45500 achieves 4.5:1 against white), use the color only for large text or non-text elements, place it against a carefully chosen background that provides sufficient contrast, or use it purely for decoration while ensuring the same information is conveyed through other means.
Consider building a contrast matrix early in your design process. List all your brand colors across both axes of a table, then fill in the contrast ratios for every possible combination. Mark which combinations pass AA for normal text, AA for large text, and AAA. This matrix becomes an invaluable reference for your entire design team, preventing accessibility issues from being introduced during implementation. Many design systems now include contrast-checked color pairs as part of their documentation to streamline this process.
Do not rely solely on color to convey information. Even with perfect contrast ratios, some users cannot distinguish between certain color pairs. Approximately 8 percent of men and 0.5 percent of women worldwide have some form of color vision deficiency. Use additional visual cues such as icons, patterns, underlines, borders, or labels to supplement color-coded information. For example, rather than using only red and green to indicate errors and success states, add icons (a warning triangle or checkmark), change the text content, or use different shapes alongside the color cues.
The most effective accessibility practices are those embedded directly into existing design and development workflows rather than treated as an afterthought or a one-time audit. For designers, checking contrast ratios should be as routine as aligning elements to a grid or maintaining consistent spacing. When selecting colors for a new design, test them against the WCAG thresholds before presenting the design for review. This prevents the costly cycle of designing, building, auditing, discovering failures, redesigning, and rebuilding.
For developers, implementing contrast checking at multiple stages provides defense in depth. During code review, verify that hardcoded color values meet contrast requirements. In component libraries and design systems, document the approved color combinations and their contrast ratios. In automated testing pipelines, integrate accessibility linting tools that flag contrast violations in CSS and rendered pages. Tools like axe-core, Lighthouse, and Pa11y can automatically scan pages for contrast issues as part of continuous integration, catching regressions before they reach production.
Content creators and marketers should also be aware of contrast requirements when creating graphics, choosing text overlays on images, and customizing email templates. Social media graphics with low-contrast text are not only less accessible but also less effective at communicating their message to all viewers. When placing text over photographs, use semi-transparent overlays or solid backgrounds behind the text to ensure consistent contrast regardless of the underlying image content.
Consider conducting regular accessibility audits that include manual testing with assistive technologies in addition to automated contrast checking. Automated tools catch many contrast issues but cannot evaluate every context. Dynamic content, custom themes, user-generated content, and content loaded from external sources may introduce contrast problems that are not visible in static analysis. Manual testing with screen readers, magnification software, and high-contrast mode helps identify issues that automated tools miss and provides a more complete picture of your site's accessibility.
One of the most frequent mistakes designers make is using light gray text on a white background for secondary or de-emphasized content. While the intent is to create visual hierarchy by reducing the prominence of certain text elements, colors like #999999 on white only achieve a contrast ratio of 2.85:1, failing even the large text AA threshold. Instead, use a medium gray like #595959 (7:1 on white) or #767676 (4.54:1 on white) to achieve hierarchy while maintaining readability. Visual hierarchy can also be created through font size, weight, and spacing rather than reducing contrast.
Another common mistake is failing to account for contrast in interactive states. Buttons, links, and form elements often change color on hover, focus, and active states. Each of these states must independently meet contrast requirements. A button that passes contrast in its default state but drops below the threshold on hover creates an intermittent accessibility barrier. Similarly, placeholder text in form fields frequently fails contrast requirements. WCAG does not exempt placeholder text from contrast checks; if the placeholder conveys important information such as the expected input format, it must be readable.
Text overlaid on images or gradients presents a particular challenge because the effective background color varies across the text area. A heading that passes contrast against the dark portion of a photograph may fail against the lighter sky or wall in the same image. The solution is to ensure contrast is sufficient against the least favorable area of the background. Techniques include placing text on a solid or semi-transparent overlay, constraining text placement to uniformly dark or light regions of the image, or using text shadows and outlines to create a consistent local background for the text.
Dark mode implementations introduce their own set of contrast pitfalls. Simply inverting colors from a light theme rarely produces accessible results because the perceptual relationship between lightness levels is not symmetric. Colors that provide adequate contrast on a light background may need different lightness adjustments on a dark background. Additionally, pure white (#FFFFFF) text on a very dark background (#000000) can cause halation, an optical effect where bright white text appears to bleed into the dark background, making the text harder to read. Using slightly tinted or muted white tones (#E0E0E0 to #F0F0F0) on dark gray rather than pure black backgrounds reduces this effect while maintaining excellent contrast ratios.
Finally, do not assume that passing a contrast check means your colors are optimally readable. Contrast ratio is a necessary but not sufficient condition for good readability. Font choice, line height, letter spacing, line length, and text rendering all affect how easily text can be read. A technically compliant contrast ratio paired with a thin, condensed typeface at a small size may still be difficult to read in practice. Use contrast checking as one tool in a broader approach to accessible, user-centered design that considers the full reading experience.
A color contrast ratio is a numerical value that measures the difference in perceived brightness between two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). Contrast ratios matter because sufficient contrast ensures that text is readable by people with visual impairments, including those with low vision, color blindness, and age-related vision changes. The Web Content Accessibility Guidelines (WCAG) define specific minimum contrast ratios that websites must meet to be considered accessible.
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). WCAG AAA is the enhanced standard, requiring 7:1 for normal text and 4.5:1 for large text. AA is the minimum standard most accessibility laws reference, while AAA provides the best readability for users with significant visual impairments.
The contrast ratio is calculated using relative luminance values of the two colors. First, each sRGB color channel is linearized by removing gamma correction. Then the relative luminance is computed as L = 0.2126 * R + 0.7152 * G + 0.0722 * B, where R, G, B are the linearized values. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color luminance and L2 is the darker color luminance. This formula is defined in WCAG 2.x specifications.
In WCAG, large text is defined as text that is at least 18 points (24 CSS pixels) in normal weight, or at least 14 points (approximately 18.66 CSS pixels) in bold weight. Large text has more relaxed contrast requirements because larger characters are inherently easier to read. This applies to headings, display text, and any prominent text elements that meet the size threshold.
Yes, this tool is completely free to use with no limits or signup required. All color calculations happen entirely in your browser using JavaScript. No color data is sent to any server, making it perfectly private and safe to use for any project. The tool works offline once the page is loaded.
If your color combination fails, you have several options. You can use the suggested accessible alternative provided by this tool, which finds the closest color to your foreground that meets WCAG AA (4.5:1). You can also try darkening your text color or lightening your background color. Another approach is to increase the font size to qualify as "large text," which has a lower contrast requirement of 3:1 for AA compliance. The swap button lets you quickly test reversed combinations.
Explore more free tools to boost your productivity