Color Contrast Checker
Loading tool controls…
Color Contrast Checker At a Glance
A color contrast checker measures the brightness relationship between a foreground color and its background. Enter two HEX values and the tool reports a numerical ratio from 1:1 for identical luminance up to 21:1 for the strongest theoretical black-on-white contrast. It then compares that ratio against common WCAG 2.x contrast thresholds for regular and large text and for qualifying non-text components. The result measures two solid colors; it does not assess every accessibility property of a finished page.
How the Color Contrast Checker Works
Enter the text or foreground HEX value in the first field and the intended background HEX value in the second. You may use three-digit notation, such as #FFF, or a six-digit value such as #6750A4. Select Check contrast to obtain the ratio and separate pass or fail results. The preview applies the exact entered foreground and background to example text, making it easier to see the pairing without rebuilding a page. Copy the text report or download it when documenting interface decisions. If a value is not valid HEX, correct it before making a design conclusion.
The mathematical process converts sRGB channels into linear-light values, combines them with the specified luminance weighting, and divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. The formula is symmetrical, so reversing foreground and background produces the same ratio, although the visual experience can differ when one is used over a large area. This implementation follows a solid-color interpretation of the WCAG 2.x relative-luminance method. It does not attempt to predict the appearance of text over a gradient, photograph, or translucent layer.
Reading a Contrast Ratio Correctly
A ratio is a measure of luminance difference, not a measure of how attractive a combination looks. A pair may reach 4.5:1 and still be uncomfortable because the text is tiny, tightly spaced, or shown in a difficult typeface. Another combination may fall just below a threshold while looking acceptable to one viewer under ideal conditions. Accessibility standards establish testable minimums across diverse needs, so personal visual impression should not replace measurement. When an important color combination falls close to the limit, a little additional contrast can provide more tolerance for display variations and future design changes.
The numerical result is easier to interpret when linked to the actual component. A small body paragraph usually needs more contrast than a large headline. A chart border may be governed by a non-text contrast requirement if it is necessary for identifying a meaningful shape or control. A decorative illustration may not need the same evaluation as a required form label. Decide what the color does before deciding which threshold to apply. This prevents the common mistake of calling a combination accessible merely because it passes the least demanding ratio shown in the report.
WCAG AA Requirements for Normal and Large Text
Under WCAG 2.x, normal text generally needs at least 4.5:1 contrast at Level AA. Qualifying large text can use a 3:1 minimum because larger, heavier letterforms tend to be easier to distinguish. The large-text rule has technical size and weight conditions; it does not automatically apply to any text rendered as an HTML heading. Responsive styles can also reduce the rendered size of a desktop heading on a phone, changing the threshold that should be used. If you are creating ordinary paragraph copy, work to at least 4.5:1 rather than assuming a large-text exception.
The checker shows normal and large text independently so you can identify the applicable result. A pair may pass large text AA while failing normal text AA, and that is not a contradiction. The pair is suitable for the particular threshold it meets, provided the element genuinely qualifies. Check small navigation labels, form hints, footnotes, tab captions, and compact buttons carefully because they often appear at sizes where the normal-text requirement applies. Good typography and adequate spacing remain necessary even with a comfortably passing contrast ratio.
WCAG AAA and Stronger Text Contrast
Level AAA text contrast requirements are stronger: 7:1 for normal text and 4.5:1 for qualifying large text. A project is not automatically required to meet AAA for every element, and some interfaces use brand graphics or content types where particular standards include exceptions. Nevertheless, stronger contrast may be valuable for long reading sessions, dense administrative tables, or interfaces used under glare. If you can increase contrast without damaging hierarchy or creating harsh combinations, that additional margin can improve robustness when the design changes later.
Stronger does not always mean that pure black text on pure white must be used everywhere. A dark neutral paired with an off-white surface can provide excellent readability while supporting a calmer layout. The right choice depends on the design system and task. The accessible palette builder proposes nearby colors that reach a chosen ratio against a particular solid background, giving you alternatives when an existing brand shade does not pass. Every proposed pairing should still be checked within the final component, including interactive states.
Contrast for Buttons, Icons, and Form Controls
WCAG includes non-text contrast requirements for certain visual information needed to identify interface components and graphical objects. A focus outline, checkbox boundary, chart line, or meaningful icon can require sufficient contrast relative to adjacent colors. The tool includes a 3:1 non-text indicator for applicable situations, but not every decorative border is subject to the same rule. Evaluate what the element communicates and whether users could understand or operate it without relying on a barely visible shape. A visually quiet border is different from the only outline identifying an input field.
For a filled button, check the text against the button fill and consider the fill against surrounding surfaces where it is necessary to identify the component. Hover, focus, active, selected, error, and disabled states may each use different foreground or background colors. Do not assume that one passing state guarantees the others. For complex components, inspect the computed styles after CSS has been applied rather than only checking token values in a design file. A rule introducing 60% opacity can substantially change the final color and make the original ratio irrelevant.
Links, Charts, and Color-Dependent Meaning
Links embedded in body text should remain identifiable by something beyond a subtle change in hue. Underlines or clear alternative treatments make links easier to discover, especially for users who cannot reliably distinguish the selected colors. A contrast ratio between link text and the page background does not by itself show that the link stands apart from neighboring paragraph text. Likewise, a chart using several similar colors can meet background contrast thresholds yet remain difficult to interpret because the series are not distinguishable from one another. Direct labels, patterns, line styles, and shapes can provide important additional cues.
A color vision preview can show approximate ways in which image colors may change under several simplified transformations, but no static simulation represents every viewer. The most reliable chart design combines measurable contrast with redundant labeling and clear visual structure. In forms, never show an error only by changing a border from gray to red; add a visible error message and appropriate programmatic information. Contrast analysis supports these decisions, but it cannot replace them.
Common Causes of False Confidence
The checker accepts solid HEX colors, so it does not directly represent semitransparent text, shadow overlays, partially opaque badges, animated backgrounds, or photo textures. A foreground using rgba() with reduced opacity may be much lighter than the HEX value it began with. Similarly, the color behind a fixed label over an image may vary from frame to frame. In such cases, calculate or inspect the effective final colors where the text actually appears. A solid backing panel or deliberate scrim may be necessary to keep text readable across the entire image.
Font smoothing, antialiasing, device characteristics, and user settings affect appearance in ways the WCAG ratio formula does not capture. Thin letterforms at small sizes can seem lighter than their nominal CSS color. Designers sometimes respond by increasing font weight, size, or spacing, which can improve readability even when the contrast ratio stays unchanged. Treat measurement and visual review as complementary. The checker provides the contrast calculation; evaluating the rendered interface requires additional inspection and, ideally, testing with people who have different visual needs.
Building a Repeatable Contrast Review
Create a short list of the foreground-background pairs used most often in your project: body copy on the page surface, secondary text on cards, link text, primary buttons, error messages, selected tabs, and focus indicators. Test each pair and record the threshold it must satisfy. When changing the design system, rerun the relevant checks instead of assuming that a new color token affects only one location. A consistent review process makes contrast problems easier to catch before they spread through dozens of pages.
Finally, review the website at mobile sizes, elevated browser zoom, and keyboard-only navigation. The color checker cannot determine whether a focus ring is visible if it is clipped or covered, whether text overflows a button, or whether a decorative icon is mistaken for a control. These are interface problems that need their own tests. A passing ratio is a useful measurement and should be retained, but it is only one component of making content easy to find, read, and operate.
Frequently Asked Questions About Color Contrast
What is a good color contrast ratio for body text?
At least 4.5:1 is the general WCAG 2.x Level AA threshold for normal-sized text. Many reading interfaces benefit from additional contrast, particularly when text is small or used in dense paragraphs. A 7:1 ratio is the Level AAA threshold for normal text. Measure the actual text color against the background on which it is displayed.
Why does 3:1 pass one test but fail another?
The thresholds have different purposes. A 3:1 contrast ratio can pass AA for qualifying large text and certain non-text graphical elements while failing the 4.5:1 AA requirement for ordinary text. Choose the criterion that matches the component, rather than treating a pass on any one row as overall approval.
Do I need black text on white for accessibility?
No. Many dark-on-light and light-on-dark combinations reach the relevant requirements. The key is the calculated relationship between the two final colors and the readability of the rendered text. Strong contrast, suitable font sizing, line spacing, and consistent hierarchy can be achieved without using only pure black and white.
Can I test a transparent foreground color?
The checker evaluates solid HEX colors. Transparent colors blend with what is underneath, so their actual luminance depends on the backdrop. Determine the final composited foreground and background first, then use those values. For text over photographs, check multiple positions or add a sufficiently solid background surface behind the text.
Does passing WCAG AA mean my website is accessible?
No. Contrast is one requirement among many. Navigation, keyboard access, focus visibility, form labels, error identification, text resizing, reading order, and appropriate alternative text all matter. A perfectly contrasted button that cannot be reached with a keyboard remains a problem even though its foreground and background pass the numeric calculation.
Why are large text requirements lower?
Large, heavier letters can generally remain legible with a smaller luminance difference than tiny letterforms. WCAG therefore permits a 3:1 AA threshold for text meeting its large-text criteria. The exemption depends on the rendered text size and weight, not merely its semantic heading tag or the designer's intention.
Is a higher number always visually better?
A higher ratio represents greater luminance contrast, but it does not describe every aspect of visual comfort or design quality. Very bright text on a dark background may feel harsh in some contexts, while large blocks of heavily emphasized text can also be difficult to scan. Meet or exceed the appropriate threshold and then review the actual typography, spacing, and visual balance.