--- title: "Color Contrast Checker - Check WCAG AA/AAA and APCA" description: "Calculate the contrast ratio between text and background colors and check WCAG AA, AAA, and an APCA reference. Adjust lightness to find a combination that works for body text and headings." canonical_url: "https://web-toolbox.dev/en/tools/color-contrast-checker" meta: author: K "og:description": "Calculate the contrast ratio between text and background colors and check WCAG AA, AAA, and an APCA reference. Adjust lightness to find a combination that works for body text and headings." "og:image": "https://web-toolbox.dev/og/en/tools/color-contrast-checker-711ebdee.png" "og:image:alt": "Color Contrast Checker" "og:image:height": "630" "og:image:width": "1200" "og:title": "Color Contrast Checker - Check WCAG AA/AAA and APCA" --- > Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt) # **Color Contrast Checker** Check text and background contrast against WCAG and APCA ## **Result** **Contrast ratio** **14.68****:1** **WCAG AAA pass** **APCA (reference)** **Lc**** +101.5** **Usable for body text** - **AA**** Pass** **Normal text** · 4.5:1 or higher - **AA**** Pass** **Large text** · 3:1 or higher - **AAA**** Pass** **Normal text** · 7:1 or higher - **AAA**** Pass** **Large text** · 4.5:1 or higher Large text is 24px or larger, or 18.66px or larger in bold. ## **Colors** **Text color** Text lightness % **Background color** Background lightness % - - - - - - - - ## **Preview** **Aa ** Large text 24px **Bold 18.66px** Large text threshold Body 16px. Check how the text and background colors read at this size. UI 14px**Learn more**View guidelines Caption 12px ## What is Color Contrast Checker? Color Contrast Checker calculates the contrast ratio between a text color and a background color, and checks the pair against WCAG AA and AAA plus an APCA reference. Use it to confirm that the colors you plan for body text and headings are readable. ## How to Use 1. Enter a text color and a background color 2. The contrast ratio, WCAG results, APCA reference, and preview update as you go 3. If the pair falls short, adjust the lightness or swap the colors and try again Enter colors as 3- or 6-digit hex codes or as CSS functions such as `**rgb()**`, `**hsl()**`, and `**oklch()**`. To start from a known combination, pick a brand preset to set both colors at once. ## Reading the Results The contrast ratio runs from 1:1 to 21:1. A higher value means a larger difference in brightness between the text and the background. WCAG 2.x sets different thresholds for normal and large text. | **Level** | **Normal text** | **Large text** | | --- | --- | --- | | AA | 4.5:1 or higher | 3:1 or higher | | AAA | 7:1 or higher | 4.5:1 or higher | Large text means 24px or larger, or 18.66px or larger in bold. When normal text passes AAA, the result is AAA. When normal text passes AA, it is AA. When only large text passes AA, it is "Large text only". APCA is a separate model shown as a reference. An Lc of 75 or higher suits body text, 60 or higher suits large text, and a negative value means light text on a dark background. It does not replace the WCAG result, so use WCAG when you need to meet a standard. ## Main Settings ### Lightness Adjust the lightness of the text and background colors from 0% to 100%. Use it when you want to change brightness without shifting the hue. ### Brand Presets Apply a color pair from a real brand, such as Spotify or IKEA. They work as a starting point when you are choosing a combination. ## Use Cases - Checking whether a site or app palette meets the contrast requirements for body text - Testing a brand color on a button or heading before you commit to it - Flipping a light palette for dark mode and checking that it stays readable - Sharing a contrast figure in a design review ## Things to Keep in Mind - The result covers the text and background colors only. It does not account for font weight, letter spacing, background images, or transparency. - A pair can meet the threshold and still feel hard to read when the text is very thin or small. - APCA is still in development for WCAG 3. **How was your experience?** Last updated: October 30, 2026 ### **Related Tools** - [

**Color Code Converter**

](https://web-toolbox.dev/en/tools/color-converter) - [

**Color Code Extractor**

](https://web-toolbox.dev/en/tools/color-extractor) - [

**Color Eyedropper**

](https://web-toolbox.dev/en/tools/color-eyedropper) - [

**Tailwind Color Palette Generator**

](https://web-toolbox.dev/en/tools/tailwind-color-palette) - [

**Aspect Ratio Calculator**

](https://web-toolbox.dev/en/tools/aspect-ratio-calculator) - [

**Business Day Calendar**

](https://web-toolbox.dev/en/tools/business-calendar) - [

**Character Counter**

](https://web-toolbox.dev/en/tools/character-counter) - [

**Credit Card Validator**

](https://web-toolbox.dev/en/tools/credit-card-validator) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/color-contrast-checker#webpage","@type":"WebPage","description":"Calculate the contrast ratio between text and background colors and check WCAG AA, AAA, and an APCA reference. Adjust lightness to find a combination that works for body text and headings.","name":"Color Contrast Checker - Check WCAG AA/AAA and APCA","url":"https://web-toolbox.dev/en/tools/color-contrast-checker","breadcrumb":{"@id":"https://web-toolbox.dev/en/tools/color-contrast-checker#breadcrumb"},"isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/color-contrast-checker"]}]},{"@id":"https://web-toolbox.dev/en/tools/color-contrast-checker#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Calculate the contrast ratio between text and background colors and check WCAG AA, AAA, and an APCA reference. Adjust lightness to find a combination that works for body text and headings.","name":"Color Contrast Checker - Check WCAG AA/AAA and APCA","operatingSystem":"Windows, macOS, Linux, Android, iOS"},{"@id":"https://web-toolbox.dev/en/tools/color-contrast-checker#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://web-toolbox.dev/en","position":1},{"@type":"ListItem","name":"Color","item":"https://web-toolbox.dev/en/categories/color","position":2},{"@type":"ListItem","name":"Color Contrast Checker","item":"https://web-toolbox.dev/en/tools/color-contrast-checker","position":3}]}]} ``` ## Sitemap See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.