Color contrast checker for foreground and background colors. Review the contrast ratio, AA and AAA text thresholds, and the visual preview.
The Color Contrast Checker compares foreground and background colors and shows their contrast ratio. Use it to review text colors against WCAG AA and AAA contrast thresholds.
AA thresholds are 4.5:1 for normal text and 3:1 for large text. AAA thresholds are 7:1 and 4.5:1, respectively. A passing color pair is only one part of an accessibility review.
Pick a foreground color and a background color with the color pickers (or paste HEX, RGB, RGBA, HSL, or named CSS color codes). The tool calculates the contrast ratio using the WCAG 2.1 formula and renders both normal-text and large-text samples on the chosen background. Pass / fail badges appear for AA, AA Large, AAA, and AAA Large simultaneously. Review any suggested lightness adjustment against the required ratio and the actual design.
AA: normal text: ratio ≥ 4.5:1
AA: large text (18pt / 14pt bold or larger): ratio ≥ 3:1
AA: UI components & graphics: ratio ≥ 3:1
AAA: normal text: ratio ≥ 7:1
AAA: large text: ratio ≥ 4.5:1
Live preview: both colors update the sample text as you adjust the pickers
Accepts HEX (#ff5733), RGB / RGBA, HSL / HSLA, and named CSS colors
Computes the WCAG 2.1 contrast ratio to 2 decimal places
Pass / fail badges for AA, AA Large, AAA, AAA Large rendered simultaneously
"Suggest fix" button: offers a lightness adjustment to review against the required threshold
Swap-colors button (reverse foreground / background) with one click
Eyedropper button (in supported browsers) to pick a color from anywhere on your screen
Dark mode that follows your system preference
Permalink: share your color combination with one URL
Choose a foreground color (your text color) using the picker or type a HEX / RGB / HSL value.
Choose a background color the same way.
The contrast ratio appears in the centre, with badges for each WCAG level.
If anything fails, click Suggest Fix to review a suggested adjustment. Check the new ratio before using it.
Copy the colors or share the permalink with your team.
Use contrast checks during these design and review tasks:
Web & product designers: verifying every text / background combination before handoff to engineering.
Front-end developers: debugging Storybook or Tailwind palettes that look fine to you but fail an a11y audit.
Brand & marketing teams: choosing CTA button colors that don't fail WCAG against a coloured hero background.
Government & public-sector contractors: check the applicable Section 508 or EN 301 549 requirements as part of a wider accessibility review.
Accessibility auditors: quickly verifying issues raised in axe-core or Lighthouse reports.
Content creators & bloggers: reviewing caption colors for Instagram, YouTube thumbnails, or PowerPoint. Check the actual background and text size.
Product managers: sanity-checking design proposals before they reach an engineering sprint.
The checker uses a WCAG contrast ratio based on the relative luminance of the two colors. Review the applicable text size and background as well as the numeric result.
Read the normal and large text samples on the selected background. Check the actual design too, especially if it includes transparency, gradients, or images.
A number from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure black on pure white). It's calculated from the relative luminance of two colors using the WCAG formula (L1 + 0.05) / (L2 + 0.05) where L1 is the brighter color.
AAA has higher text-contrast thresholds than AA. Choose the applicable criterion for the content being reviewed. A contrast result alone does not establish conformance with WCAG or a law.
Per WCAG: 18pt (about 24px) or larger, OR 14pt bold (about 18.66px bold) or larger. Large text gets a more forgiving 3:1 threshold at AA because larger letterforms are inherently more readable.
Contrast depends on both colors, not on how vivid one color looks. Adjust the foreground or background and check the ratio again. Review any suggested change in the actual design before adopting it.
The WCAG ratio is a luminance-only check; it doesn't directly model color-blindness. However, sufficient luminance contrast usually also helps color-blind users distinguish foreground from background. For deeper checks, also test your palette against Deuteranopia, Protanopia, and Tritanopia simulations.
The ratio described here is the WCAG contrast calculation, not an APCA result. Do not treat the two as interchangeable measurements.
Yes: the AA threshold for "non-text contrast" (UI components, focus rings, graphical objects) is 3:1. Use the same checker; just compare the icon stroke / fill color against the background color.
How to Use Color Contrast Checker - WCAG AA and AAA
Choose the text foreground and background colors with the pickers or enter the color values.
Review the contrast ratio and the AA and AAA results for normal and large text. Match the threshold to the actual text size.
If the pair fails the required threshold, adjust a color or review Suggest Fix. Check the resulting ratio and preview again.
Copy the colors you need, then review them in context. Contrast is one check, not a complete accessibility or legal-compliance assessment.
Color contrast checker for foreground and background colors. Review the contrast ratio, AA and AAA text thresholds, and the visual preview.
Tool Use:
25Added:
Jun 10, 2026Type:
Free ToolPrivacy:
Client SideChoose a color, adjust its red, green, blue, and alpha values, then copy it.
Hex to RGBA converter for CSS colors. Enter a HEX or RGBA value in its corresponding field, review the output, and check transparency in the destination.
Choose a color and copy its HEX, RGB, or HSL value.
Compare HEX, RGB, and HSL color values for your stylesheet.