Understanding WCAG 2.1 / 2.2 Contrast Guidelines
Web Content Accessibility Guidelines (WCAG) 2.1 and 2.2 establish clear criteria for color contrast to ensure digital content is readable for users with visual impairments. Contrast is measured as a ratio comparing the relative luminance of two colors, ranging from 1:1 (no contrast, such as white text on a white background) to 21:1 (maximum contrast, such as black text on a white background).
To meet compliance standards, text and user interface elements must achieve specific minimum contrast ratios. The Contrast Checker evaluates your selected colors against these official thresholds to determine if they pass or fail the requirements for different text sizes and interface components.
Input Formats and Initial Configuration
The Contrast Checker accepts three primary color formats for both the text color and the background color:
- Hex values: Hexadecimal codes, such as
#1a1a1a. - RGB values: Red, Green, Blue functional syntax, such as
rgb(26, 26, 26). - HSL values: Hue, Saturation, Lightness functional syntax.
When you load the tool, the initial colors are set to #4f46e5 for the text color and #ffffff for the background color. This default combination yields a calculated contrast ratio of 6.29:1.
If you enter an invalid color format into the text color input, the tool displays the error message: "Enter a valid text color, like #1a1a1a or rgb(26, 26, 26).". If you enter an invalid color format into the background color input, the tool displays the error message: "Enter a valid background color, like #ffffff or rgb(255, 255, 255).". You can also use the swap button to instantly flip the text and background colors.
Contrast Thresholds for Normal and Large Text
The WCAG framework distinguishes between normal text and large text because larger characters are easier to read at lower contrast levels. The size thresholds are defined as follows:
- Normal text: Any text smaller than 18pt (about 24px), or smaller than 14pt (about 18.5px) when bold.
- Large text: Text that is at least 18pt (about 24px) in size, or at least 14pt (about 18.5px) when bold.
The table below outlines the minimum contrast ratios required to achieve a "Pass" status for each text category across the AA and AAA accessibility levels:
| Text Category | AA Level Minimum Ratio | AAA Level Minimum Ratio |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
Contrast Requirements for UI Components and Graphics
Accessibility compliance extends beyond body copy to include active user interface components and graphical objects. This category includes elements like buttons, form borders, and informational icons.
Unlike standard text, the UI & graphics evaluation does not feature separate AA and AAA levels. Instead, the tool measures contrast against a single threshold:
- UI & graphics requirement: Must achieve a contrast ratio of at least 3:1 to display a "Pass" status.
If the contrast ratio is below 3:1, the tool displays a "Fail" status for this category.
Interpreting the Tool Verdicts
Based on the calculated contrast ratio of your input colors, the Contrast Checker generates a summary verdict to indicate the highest level of compliance achieved:
- "Passes AA and AAA for normal text." This verdict appears when the contrast ratio is 7:1 or higher, satisfying all text criteria.
- "Passes AA for normal text." This verdict appears when the contrast ratio is at least 4.5:1 but less than 7:1.
- "Passes AA for large text only." This verdict appears when the contrast ratio is at least 3:1 but less than 4.5:1.
- "Below the AA minimum — raise the contrast." This verdict appears when the contrast ratio is below 3:1, meaning the combination fails to meet the minimum requirements for any text size.
Local Browser Processing and Privacy
The Contrast Checker processes all calculations locally within your web browser. No color values, text inputs, or configuration data are uploaded to BroBroGo.
Frequently Asked Questions
What do the AA and AAA results mean?
AA is the level most sites aim for: it needs a ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter — 7:1 for normal text and 4.5:1 for large text. The ratio runs from 1:1 (no contrast) to 21:1 (black on white).
What counts as large text?
Text from 18pt (about 24px), or 14pt (about 18.5px) when bold. Larger text stays legible at lower contrast, so it passes AA at 3:1 and AAA at 4.5:1 instead of the stricter normal-text thresholds.
Which color formats can I enter?
Type a hex value like #1a1a1a, an rgb() value like rgb(26, 26, 26), or an hsl() value — or click either swatch to pick a color. Use the swap button to flip the text and background colors.
Is this WCAG 2 or the newer APCA method?
It uses the WCAG 2.1 / 2.2 formula, the one accessibility rules and audits reference today. APCA is a newer, more perceptual method still being drafted for WCAG 3 — promising, but not yet a compliance standard, so the pass results here do not use it.