This contrast checker measures the WCAG color contrast ratio between any two colors and tells you instantly whether they pass AA or AAA accessibility levels. Enter a foreground (text) color and a background color as hex or rgb/rgba, or pick them with the built-in color swatches, and the tool calculates the exact ratio plus pass/fail verdicts for normal and large text. It is built for developers, designers, and QA engineers who need a quick color contrast ratio check while building accessible interfaces, design systems, or marketing pages. A live preview renders sample text in your chosen colors so you can judge legibility at a glance and catch accessibility contrast issues early. Everything runs locally in your browser, so your color values are processed on your device and nothing is uploaded to a server.
Features
Computes the exact WCAG 2.x contrast ratio between two colors
Accepts hex (3 or 6 digit), rgb(), and rgba() color formats
Shows AA pass/fail for normal text (4.5:1) and large text (3:1)
Shows AAA pass/fail for normal text (7:1) and large text (4.5:1)
Native color picker swatches for both foreground and background
Live preview that renders sample text in your selected colors
Clear validation message when a color value cannot be parsed
How to use the Contrast Checker
Enter your text color in the Foreground (text) field, or pick it with the color swatch.
Enter your background color in the Background field, or use its swatch.
Read the contrast ratio shown above the verdict badges.
Check the AA and AAA pass/fail badges for normal and large text.
Example
Input
Foreground (text): #777777
Background: #ffffff
Output
contrast ratio: 4.48
AA · normal text (4.5:1): Fail
AA · large text (3:1): Pass
AAA · normal text (7:1): Fail
AAA · large text (4.5:1): Fail
Medium gray on white narrowly fails AA for normal-size body text.
Common errors & troubleshooting
Pasting a CSS color name like "red" or "rebeccapurple" returns an invalid color error. — Use a hex value (e.g. #ff0000), or rgb()/rgba() instead of named colors.
An 8-digit hex with alpha (#rrggbbaa) is rejected as an invalid color. — Drop the alpha channel and supply a 6-digit hex; the checker reads opaque colors only.
Text passes AA large but fails AA normal, and you are unsure which applies. — Large text means roughly 18pt+ (or 14pt+ bold); body copy must meet the stricter 4.5:1 normal threshold.
An rgba() alpha value does not change the contrast ratio. — The ratio is computed on the RGB channels only, so flatten transparency against the real background color before checking.
Frequently asked questions
What is a contrast checker and why does WCAG ratio matter?
A contrast checker compares two colors and reports the WCAG contrast ratio between them, which predicts how readable text will be. The ArrayKit Contrast Checker shows the exact ratio plus AA and AAA verdicts so you can confirm text is legible for low-vision users.
What contrast ratio do I need to pass WCAG?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text, while AAA requires 7:1 for normal text and 4.5:1 for large text. The Contrast Checker shows all four verdicts at once.
How do I check the contrast ratio for my text and background?
Enter your text color in the Foreground field and your background color in the Background field (hex, rgb, or rgba), or use the swatches. The Contrast Checker updates the ratio and AA/AAA badges live as you type.
What counts as large text for the 3:1 threshold?
Large text is generally about 18pt and up, or 14pt and up when bold. Anything smaller is treated as normal text and must meet the higher 4.5:1 ratio.
Does the contrast ratio account for opacity?
No. The ratio is based on the solid RGB values, so flatten any semi-transparent color against its actual background before checking it in the Contrast Checker.
Are the colors I enter in the Contrast Checker sent anywhere?
No. The Contrast Checker runs entirely in your browser, so the colors you enter stay on your device and nothing is uploaded to a server.