WCAG Contrast checker
Measure text contrast between a foreground and background color for accessibility.
How to use the WCAG Contrast checker
What does the WCAG Contrast checker do?
Measure text contrast between a foreground and background color for accessibility; It applies this page-specific rule: measure text contrast between a foreground and background color for accessibility.
Which inputs does this tool use?
To measure text contrast between a foreground and background color for accessibility, enter Input, Result; keep every value in the same example; select Check input when the values are ready; Start with a familiar case covered by this rule - Relative luminance is calculated for the foreground and background colors and expressed as a WCAG contrast ratio - so the expected result can confirm the settings.
How should the tool result be read?
For a result intended to measure text contrast between a foreground and background color for accessibility, relative luminance is calculated for the foreground and background colors and expressed as a WCAG contrast ratio; read result together with the original input rather than as an isolated answer, and confirm that its units or structure match the intended use.
What ratio does normal text need?
When the goal is to measure text contrast between a foreground and background color for accessibility, WCAG AA generally requires at least 4.5:1 for normal-sized text.
What about large text?
When using the page to measure text contrast between a foreground and background color for accessibility, large text can meet WCAG AA at a lower 3:1 contrast ratio.
Limits and accuracy
When using this tool to measure text contrast between a foreground and background color for accessibility, a passing ratio addresses color contrast only; typography, size, states, images, and surrounding design still affect accessibility; a passing result confirms the rules tested on this page, but it does not prove that an address, identifier, account, or remote resource exists; keep input until the output has been checked in its intended destination.
What WCAG Contrast checker does
Measure text contrast between a foreground and background color for accessibility.
Enter the value or list you want to check in the labeled controls. The WCAG Contrast checker result stays separate so you can review it before copying, downloading, or using it elsewhere.
Your work is processed in this browser tab. Keep the original whenever a conversion changes formatting, dimensions, or precision.
Frequently asked questions
What contrast ratio is required for large text?
This implementation convert two opaque sRGB hexadecimal colors to relative luminance, calculate their contrast ratio, and compare it with WCAG AA and AAA thresholds for normal and large text. The output is contrast ratio, relative comparison, and pass or fail results for normal and large text at AA and AAA levels.
How is transparency handled?
The tool handles only the format and rules described on this page. It computes a two-color readability metric and conformance thresholds rather than merely validating color syntax. It does not contact a remote validation or lookup service.
Does passing contrast guarantee full accessibility?
Input is processed by JavaScript in the current browser tab. Nothing entered in the tool is sent to Plain Tools; keep the original when the transformation is lossy.