Color Contrast Checker (WCAG and KWCAG)
Enter a text and a background color to get the WCAG 2.2 contrast ratio and AA/AAA pass or fail for normal text, large text and UI components. Explains the 4.5:1 rule used by Korea's KWCAG 2.2 and suggests the nearest passing color when a pair fails.
How to use
- Type the text and background colors as HEX (#767676) or rgb(118, 118, 118), or pick them with the color pickers.
- The contrast ratio shows as a large number (for example 4.54:1) with an AA/AAA table for normal text, large text and UI components.
- If a pair falls short, choose a target (4.5:1, 7:1 or 3:1). You get the nearest passing text color and the nearest passing background color, each with a copy button.
- Use the swap button to exchange the two colors, and check the preview to see how it reads at real text sizes.
FAQ
How is the contrast ratio calculated?
It uses the WCAG 2.2 relative luminance definition. Each channel (0-255) is divided by 255 and linearized (c / 12.92 when c is 0.04045 or less, otherwise ((c + 0.055) / 1.055) to the power 2.4), then L = 0.2126R + 0.7152G + 0.0722B. The ratio is (lighter L + 0.05) / (darker L + 0.05), from 1:1 for identical colors to 21:1 for black on white.
What ratio does Korea's KWCAG 2.2 require?
The Korean Web Content Accessibility Guidelines (KWCAG 2.2) look for a text-to-background contrast of at least 4.5:1, and the accessibility certification review for public-sector sites uses the same value. That equals the WCAG 2.2 AA level for normal text. Obligations and review procedures can change, so confirm against the current guidelines of the reviewing body.
When does text count as large?
Text is large at 18pt (about 24px) or more, or 14pt (about 18.7px) or more when bold. Large text needs 3:1 for AA and 4.5:1 for AAA. Normal text needs 4.5:1 for AA and 7:1 for AAA. UI components and graphics, such as input borders and icons, need at least 3:1 against adjacent colors.
Why must the ratio not be rounded at 4.5:1?
WCAG says the value must not be rounded. A real ratio of 4.499 fails even though it would display as 4.50. This checker judges the unrounded value, uses two decimals only for display, and warns you when rounding makes a pair look like it reaches a threshold. For example #777777 on white is 4.48:1 and fails AA for normal text, while #767676 is 4.54:1 and passes.
How are transparent colors and gradients handled?
A translucent text color (8-digit HEX or rgba()) is composited over the background, and a translucent background is composited over white. Gradients and photos have no single background color, so check the text against the lightest and darkest spots behind it.
How is the suggested color found?
The hue and saturation stay fixed while the HSL lightness is moved up or down, and a binary search finds the closest point that passes the target. Highly saturated colors may have to become noticeably darker or lighter, and if no lightness can reach the target against the other color, no suggestion is shown.
AI agents: this calculation is available over an API without the form — see /llms.txt and the tool list at /api/calc; confirm the final result on this page.