Contrast Checker

📖 Tool Introduction

Contrast Checker is an online readability validator built for accessible design and front-end development. It follows the relative-luminance formula from the W3C Web Content Accessibility Guidelines (WCAG 2.1) exactly, computes the contrast ratio between any foreground color and its background, and then judges whether the combination meets the AA and AAA levels. Plenty of color pairs look harmonious on screen, yet the moment text sits on a light gray background it turns muddy and hard to read, and the root cause is almost always an insufficient contrast ratio. This tool first gamma-linearizes each sRGB channel, then applies the weighted sum L = 0.2126R + 0.7152G + 0.0722B to obtain the relative luminance, and finally derives the ratio as (L1 + 0.05) divided by (L2 + 0.05). In the middle of the page sits a live preview block that renders a heading and body copy directly in your chosen colors, so what you see is what your users get. Below it the ratio is shown in large type as X.XX to 1, and under that four rating cards cover normal-text AA, normal-text AAA, large-text AA and large-text AAA, each turning green on pass and red on failure. The swap button in the middle exchanges foreground and background instantly for faster trial and error, the result can be copied in one click, and the whole tool runs offline. For teams shipping public-facing products, meeting these thresholds is not just good taste but a legal and ethical baseline, and catching a borderline pair early saves a frustrating round of visual review later. The live preview block is especially helpful because a ratio number alone cannot convey how the text actually feels on the chosen background, while the four badges translate the abstract formula into a simple pass or fail that anyone on the team can read without memorizing the WCAG tables.

✨ Key Features

• Standard formula: uses the WCAG relative-luminance and ratio math, matching authoritative tools
• Four ratings: normal and large text each graded for AA and AAA in one screen
• Live preview: heading and body copy render in the real color pair
• One-click swap: the button exchanges foreground and background for quick iteration
• Clear ratio: the number reads X.XX to 1 with the threshold printed on each card
• Copy result: a single line records foreground, background and ratio for your spec

📝 How to Use

1. Set the foreground (text) color with the well or by typing its HEX
2. Set the background color the same way
3. Look at the preview block to feel how the text reads in context
4. Read the ratio and the four rating cards to decide whether the pair passes
5. Click Copy Result to log it, or hit the swap button to keep testing

⚠️ Notes

• Thresholds: normal text needs 4.5 for AA and 7 for AAA; large text needs 3 and 4.5
• Large text: usually 18pt regular or 14pt bold and above, per the spec wording
• HEX format: only #RRGGBB is accepted; bad input is warned instead of computed
• Precision: the ratio keeps two decimals, ratings are judged strictly against the thresholds
• Local only: luminance and ratio math runs in your browser, nothing is uploaded