AK
appkiro.comLarge Text (24px+)
Normal text at 16px. The quick brown fox jumps over the lazy dog.
Small text at 14px for fine print and captions.
Color Contrast Checker measures the contrast ratio between text and background colors, then tells you whether the combination meets WCAG accessibility standards. Pick two colors, see the ratio instantly, and use the fix buttons if you need to adjust for compliance.
The tool calculates the contrast ratio between a foreground color (usually text) and a background color using the formula defined in the Web Content Accessibility Guidelines. It compares that ratio against four WCAG thresholds — AA and AAA for both normal and large text — and shows you which levels pass. The preview panel displays sample text at different sizes so you can see how readable the combination actually is.
Low contrast makes text hard to read for everyone, but especially for people with low vision, color blindness, or age-related vision changes. Meeting WCAG contrast requirements ensures your content is readable in different lighting conditions, on various screen types, and for users with a wide range of visual abilities. It is also a legal requirement in many jurisdictions for public-facing websites and applications.
Check contrast early in the design process — before finalizing a color palette — so you do not have to rework designs later. Use it again during development to verify the implemented colors match the design intent and still pass. Run it during accessibility audits to catch contrast issues in existing products. Any time you are unsure whether a text-and-background combination is accessible, this tool gives you a definitive answer in seconds.
The tool converts your hex colors to RGB, calculates the relative luminance of each color according to the WCAG formula, then divides the lighter luminance by the darker one (with a small offset) to get the contrast ratio. A ratio of 1:1 means no contrast at all — white on white, or black on black. A ratio of 21:1 is the maximum possible contrast — black on white or white on black. Most readable text combinations fall somewhere between 4.5:1 and 12:1.
Most organizations aim for AA compliance as the standard. AAA is stricter and harder to achieve with brand colors, but it provides better accessibility for users with low vision.
WCAG defines large text as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. In web terms, that is roughly font-size: 24px or font-size: 18.66px; font-weight: 700. Headings, hero text, and large UI labels usually qualify as large text. Body copy, form labels, and button text usually do not.
When you click Fix to AA or Fix to AAA, the tool adjusts the foreground color by changing its lightness in HSL color space. It keeps the hue and saturation the same, so the color stays recognizable, but shifts it lighter or darker until the contrast ratio meets the target. The result is not always perfect — sometimes the adjusted color looks washed out or too dark — but it gives you a starting point that passes the standard.
Do I need to meet AA or AAA?
AA is the standard for most websites and applications. AAA is recommended for content where readability is critical — government services, healthcare, education, long-form articles — or when you want to provide the best possible experience for users with low vision. If you are unsure, aim for AA as the baseline and exceed it where you can.
Does this tool check color blindness?
No — this tool only checks luminance contrast, which is about lightness and darkness. Color blindness is about hue differentiation. Use a color blindness simulator to check whether your colors are distinguishable for people with different types of color vision deficiency.
What about non-text elements like icons and buttons?
WCAG 2.1 introduced a 3:1 contrast requirement for non-text elements like icons, form controls, and focus indicators under the "Non-text Contrast" criterion (1.4.11). This tool measures text contrast, but you can use the same ratio calculation for UI elements — just aim for 3:1 or higher.
My design passes the tool but still looks hard to read. Why?
Contrast ratio is a mathematical measure, not a perfect predictor of readability. Font choice, weight, size, anti-aliasing, and surrounding visual noise all affect how readable text actually is. The tool tells you whether you meet the standard, but your eyes and user testing are the final judge.
Can I use this for print design?
WCAG is written for digital screens, not print. Print has different contrast considerations — ink opacity, paper color, lighting conditions. The ratios here are a useful reference, but print accessibility guidelines are separate.
What if I have text over an image or gradient?
This tool checks solid color pairs. For text over images or gradients, you need to ensure sufficient contrast across the entire area where text appears. Common solutions include adding a semi-transparent overlay behind the text, using a text shadow, or choosing image areas with consistent lightness.
Does the tool store my colors?
No. Everything runs in your browser. No data is sent anywhere.