Color Contrast Checker

Contrast ratio is calculated using the relative luminance formula defined by the Web Content Accessibility Guidelines (WCAG). Relative luminance (L) measures the relative brightness of any point in a color space, normalized to 0 for darkest black and 1 for lightest white. The contrast ratio is defined 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 resulting ratio ranges from 1:1 (no contrast) to 21:1 (black on white).

WCAG Level AA is the standard legal baseline for web accessibility across most international laws and enterprise guidelines. It requires a contrast ratio of at least 4.5:1 for normal body text and 3:0 for large text or UI components. Level AAA represents enhanced accessibility, requiring at least 7.0:1 for normal text and 4.5:1 for large text. Designing for AAA provides maximum readability for users with low vision or color vision deficiencies.

Under WCAG 2.1 and 2.2 specifications, 'Large Text' is defined as text that is at least 18pt (24px) in regular weight or at least 14pt (18.66px) in bold weight. Because larger fonts are easier to read, WCAG allows a lower minimum contrast ratio of 3.0:1 for Level AA and 4.5:1 for Level AAA.

Yes, 100%. All calculations, color format parsing, luminance evaluation, and suggestion algorithms execute 100% client-side inside your browser using pure local JavaScript. No colors, user inputs, or analytical data are ever sent to ToolZeno servers.

When a chosen color pair fails WCAG AA or AAA requirements, our smart algorithm analyzes the color's HSLA profile. It iteratively adjusts the lightness (L) or brightness of the foreground or background color while preserving the original hue (H) as closely as possible, finding the nearest accessible color shade that meets 4.5:1 or 7.0:1 contrast.