DESIGN TOOLS
Calculate text and background contrast against WCAG 2.2 text requirements. Preview the pairing and copy HEX, RGB and CSS values.
Free · No sign-up · Processed on your deviceBUILD YOUR PAIR
Supports opaque sRGB HEX colors.
YOUR COLOR STORY
This text uses your selected foreground and background colors. Check whether small text is comfortable to read too.
Your chosen colors may make this preview difficult to read.
Preparing the tool…
CONTRAST RATIO
From 1 : 1 to 21 : 1
This checks text contrast between two colors. It does not certify accessibility of an entire site.
COLOR NOTE
Contrast compares the relative luminance of two colors. Different hues with similar brightness can make text difficult to distinguish from its background. This tool linearizes sRGB channels before calculating luminance.
WCAG AA requires 4.5 : 1 for normal text and 3 : 1 for large text. Large text generally means at least 18 pt, or 14 pt when bold, with equivalent sizes considered for scripts such as Korean.
Thin fonts, background images and interactive states are not fully represented by two solid colors. Check the intended font and size. Pair color with text or symbols when communicating success or failure.
Calculation reference: W3C WCAG 2.2: Understanding text contrast. AAA uses 7 : 1 for normal text and 4.5 : 1 for large text.
No. Thresholds are evaluated using the unrounded ratio. The display shows three decimal places, but rounding never turns a failing combination into a pass.
Three-digit HEX repeats each digit to form six digits: #ABC becomes #AABBCC. Uppercase and lowercase are accepted. Results include RGB values and CSS you can copy.
This version checks two opaque solid colors only. Transparent colors need to be composited with their actual background first. Gradients and photos require checking the background behind each text position. HEX codes with alpha values are not accepted.
The tool compares black and white against the current background and suggests whichever has higher contrast. It does not preserve your original hue, and the suggestion is applied only when you click the button.
Essential non-text elements have separate requirements and exceptions. The AA and AAA labels here apply to text. For input borders and icons, check WCAG non-text contrast guidance and the actual adjacent colors.
Text contrast is one part of accessibility. This color calculation does not test keyboard access, accessible names, labels, zoom or error messages. Do not use it as certification or a guarantee for an entire site.