--- url: https://findutils.com/guides/contrast-checker-guide title: "Contrast Checker: WCAG Ratios for Text and Background Colors" description: "Check text contrast with FindUtils. Learn WCAG AA and AAA ratios, large-text thresholds, and why a passing color pair does not prove full accessibility." category: design content_type: guide locale: en read_time: 6 status: published author: "olgunozoktas" published_at: 2026-05-17T17:00:00Z excerpt: "Check text contrast with FindUtils. Learn WCAG AA and AAA ratios, large-text thresholds, and why a passing color pair does not prove full accessibility." tag_ids: ["design", "accessibility", "color", "wcag"] tags: ["Design", "Accessibility", "Color", "WCAG"] primary_keyword: "contrast checker" secondary_keywords: ["wcag contrast checker", "color contrast checker", "accessibility contrast test", "contrast ratio checker", "aa aaa contrast"] tool_tag: "contrast-checker" related_tool: "contrast-checker" related_tools: ["contrast-checker", "color-converter", "color-palette-generator", "gradient-generator"] updated_at: "2026-09-08T09:09:24Z" og_image: "/images/content/guides/contrast-checker-guide-cover-20260908.webp" image_alt: "A dark circular sample and a pale circular sample sit on contrasting backgrounds beside a simple light measurement scale." --- A contrast checker is a tool that measures the contrast ratio between a text color and its background, then tells you whether it meets WCAG accessibility standards. To use one, enter the two colors and read the ratio and pass/fail result. The FindUtils [Contrast Checker](/design/contrast-checker/) does this instantly in your browser — free, with no signup. This guide explains what contrast ratio means, how to check a color pair step by step, the WCAG AA and AAA thresholds, and how to fix colors that fail. ## What Is Color Contrast and Why Check It? Color contrast is the measured difference in luminance between text and its background, expressed as a ratio from 1:1 (identical) to 21:1 (black on white). A contrast checker calculates that ratio and compares it to accessibility standards. Low-contrast text is hard to read for everyone and unreadable for people with low vision or color blindness. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios, for applicable content. A color-pair check is only one part of an accessibility review. Check contrast when: - **You pick text and background colors** for a website, app, or document. - **You use brand colors** — a brand palette can look good but fail contrast. - **You design buttons and links** — interactive elements especially need clear contrast. - **You audit an existing site** for accessibility compliance. - **You use light gray text** — the most common contrast failure on the web. ## How to Check Color Contrast Online Checking contrast takes one step: enter the two colors. The FindUtils Contrast Checker calculates the ratio and the WCAG result instantly, in your browser. ### Step 1: Open the Contrast Checker Go to the FindUtils [Contrast Checker](/design/contrast-checker/) and prepare your two colors — the text color and the background color. ### Step 2: Enter the Text and Background Colors Enter both colors in HEX (or another format). If you only have a color in one notation, convert it first with the FindUtils [Color Converter](/design/color-converter/). ### Step 3: Read the Contrast Ratio The checker shows the ratio — for example, `4.7:1`. A higher ratio means more contrast and better readability. ### Step 4: Check the WCAG Pass/Fail Review whether the pair passes WCAG AA and AAA for normal and large text. If it fails, adjust one color (usually darkening the text or the background) and re-check. ## WCAG Contrast Thresholds WCAG defines minimum contrast ratios. Knowing them tells you exactly what to aim for. | Standard | Text size | Minimum ratio | |----------|-----------|---------------| | AA | Normal text that does not meet the large-text definition | 4.5:1 | | AA | At least 18pt, or at least 14pt bold | 3:1 | | AA | UI components, graphics | 3:1 | | AAA | Normal text | 7:1 | | AAA | Large text | 4.5:1 | Use the conformance target that applies to your project. These numbers concern specific contrast criteria, not complete WCAG conformance or legal compliance. Review the [WCAG contrast criterion](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) and the exceptions for the content type. ## Contrast Checker: Online Tool vs Other Methods A color-pair checker evaluates a selected foreground and background. A full accessibility review also examines structure, keyboard access, labels, and other criteria. One contrast result cannot certify an entire page. ## Common Contrast Mistakes and How to Fix Them ### Mistake 1: Light Gray Text on White The most common failure on the web. Light gray placeholder-style text rarely meets 4.5:1. Fix it by darkening the gray until it passes AA. ### Mistake 2: Assuming Brand Colors Pass A brand color used as text often fails contrast against common backgrounds. Fix it by checking each brand-color text use, and darkening or pairing with a different background where it fails. ### Mistake 3: Ignoring Large-Text Rules Large text only needs 3:1, so a color that fails for body text may pass for headings. Fix it by checking against the correct threshold for each text size. ### Mistake 4: Forgetting Interactive Elements Buttons, links, and form borders need contrast too (3:1 for UI components). Fix it by checking interactive elements, not just body text. ### Mistake 5: Testing Only One State A link might pass in its default color but fail on hover or when visited. Fix it by checking every color state an element can be in. ## Tools Used in This Guide - **[Contrast Checker](/design/contrast-checker/)** — Test color pairs against WCAG AA and AAA - **[Color Converter](/design/color-converter/)** — Convert colors between HEX, RGB, and HSL - **[Color Palette Generator](/design/color-palette-generator/)** — Build accessible color palettes - **[Gradient Generator](/design/gradient-generator/)** — Create CSS gradients visually ## FAQ **Q: Is the contrast checker free to use?** A: Yes. The FindUtils Contrast Checker is available without signup and no usage limits. It runs in your browser — nothing is uploaded to a server. **Q: What contrast ratio do I need to pass WCAG?** A: For WCAG AA, normal text needs at least 4.5:1 and large text needs 3:1. For the stricter AAA level, normal text needs 7:1 and large text needs 4.5:1. AA is the practical baseline most sites must meet. **Q: What is a contrast ratio?** A: A contrast ratio is the measured difference in luminance between two colors, from 1:1 (identical) to 21:1 (black on white). Higher ratios mean text is easier to read, especially for people with low vision. **Q: Why does my light gray text fail contrast?** A: Light gray text on a white background is the most common WCAG failure. It rarely reaches the 4.5:1 ratio required for normal text. Darken the gray until the checker shows it passes AA. **Q: Does large text need less contrast?** A: Yes. Large text (about 18pt or larger, or 14pt bold) only needs a 3:1 ratio for WCAG AA, versus 4.5:1 for normal text, because larger letterforms are easier to read. **Q: Is it safe to use a contrast checker online?** A: This contrast operation uses browser calculations. Local processing does not certify the complete device or every website request. ## Next Steps - Convert color formats with the [Color Converter](/design/color-converter/) - Build an accessible palette with the [Color Palette Generator](/design/color-palette-generator/) - Read the [color converter guide](/guides/color-converter-guide/) to master color formats - Read the [complete guide to online image tools](/guides/complete-guide-to-online-image-tools/) for more free utilities