Check the contrast ratio between text and background colors instantly. Ensure your designs meet WCAG 2.1 AA and AAA standards for perfect readability.
This is a live preview of how your text will look to users on this exact background. Proper color contrast helps people with visual impairments, color blindness, and even average users reading their screens in harsh sunlight.
Providing sufficient color contrast is not just a best practice—it is a critical requirement under the Web Content Accessibility Guidelines (WCAG) and often legally mandated by the Americans with Disabilities Act (ADA) for business websites.
Contrast ratios range from 1:1 (no contrast, e.g., white on white) to 21:1 (maximum contrast, e.g., black on white). Checking this ratio ensures that your written content can be clearly distinguished from its background by all demographics, including the aging population and the estimated 8% of males with color vision deficiency.
The W3C defines three levels of conformance. For most public-facing websites, reaching Level AA is the standard requirement.
Don't rely solely on color to convey information (e.g., a red border for an error). Always include text or icons as secondary indicators.
Ensure your :hover, :focus, and :active states also meet contrast requirements, not just the base state.
If using RGBA or opacity, ensure the "flattered" result against the background still passes the 4.5:1 threshold.
Store your accessible color palette in CSS variables. This makes it easy to audit and update your design system globally.
If your colors fail the check in our tool, use the color swatch pickers to rapidly adjust the lightness or darkness. Lightening the lighter color or darkening the darker color will instantly improve the ratio coefficient. For designers, consider using semi-bold fonts for problematic color pairs to improve perceived legibility.
Yes. Our algorithm uses the precise relative luminance mathematical formula specified by the W3C Web Content Accessibility Guidelines (WCAG 2.1) to compute scores. You can read the official WCAG 2.1 documentation here.
According to WCAG, large text is defined as text that is 18pt (usually 24px) or larger, OR text that is 14pt (usually 18.66px) and bold.
User interface components, input boundaries, icons, and non-text graphics must meet a minimum contrast ratio of 3.0:1 against their adjacent colors to pass the WCAG AA standard.
Currently, the text input accepts Hexadecimal codes (e.g., #FFFFFF), but clicking the circular color swatch will open your systems native color picker, which natively supports RGB and HSL inputs on most devices.