/en/tool/contrast-checker/ works Runs in the browser
Enter a text color and a background color. The tool will calculate contrast using WCAG 2, show which levels the pair passes, and find the nearest color that makes it pass. You’ll also see APCA from the WCAG 3 project, how the pair looks with color blindness, a grid of the entire palette, and an analysis of your CSS. Everything runs in the browser: no colors or files are sent anywhere.
The order of the colors does not affect the number: contrast is symmetric. The slider below the field changes lightness without affecting hue or saturation—the shortest way to bring a pair within the standard without losing its color.
The tool adjusts lightness in HSL without changing hue or saturation: the color stays the same, and only its lightness changes. This brings the pair up to the required level while keeping the brand recognizable.
The threshold is selected above. The shift is shown in HSL lightness points — the percentage by which the color needs to be made darker or lighter.
APCA is a contrast model from the WCAG 3 project. Unlike WCAG 2, it accounts for font size and weight and calculates dark text on light backgrounds differently from light text on dark backgrounds. It is not a standard yet: WCAG 2 is still required, and its results are shown above.
Lc value
—
| Font size |
|---|
The thresholds in the table are APCA levels: Lc 90 for small body text, 75 for regular text, 60 for large text, 45 for headings, and 30 — the limit below which text should not be used at all. Weight shifts the threshold: 300 adds 15 points, 500 subtracts 5, 600 subtracts 10, and 700 subtracts 15. This is a simplified scale: the official APCA font-size lookup table still changes from version to version, while WCAG 2 remains the required standard.
Brightness contrast changes very little with color vision deficiency — the color changes instead. If the pair relied on a red-versus-green difference rather than a lightness difference, it will collapse into two identical bands here, which is immediately visible.
One pair at a time is a check. Designers need a grid showing which palette colors can be placed on top of each other and which cannot, regardless of font size. Each cell is filled with the actual pair, so you can see the grid instead of reading it.
Paste in colors to see a grid of all pairs.
| Text on background |
|---|
—A page can contain hundreds of pairs, and no one checks them by hand. There are two ways to handle them here, and neither requires rewriting colors manually: the bookmarklet checks a live page directly in your browser, while the CSS parser finds issues in your source files.
The bookmarklet scans all visible elements with text, gets each element's computed text color and actual background—with all translucent layers and inherited styles—compares them against thresholds based on font size and saturation, and outlines failures directly on the page. It works on any site, including password-protected and local sites, because the checks run in your browser, not on our server.
Drag the “Page contrast” button to your browser's bookmarks bar. If the bar is hidden, press Ctrl + Shift + B, or Cmd + Shift + B on a Mac.
Open your page and click the bookmarklet. A list of pairs that fail AA will appear, and the failures will be outlined on the page.
Each row in the list links here with its pair already filled in: click it to immediately find the nearest passing color.
You can click the bookmarklet right here: it will check this page and show what it finds. On pages that block third-party scripts with a strict security policy, the bookmarklet will not run—use the CSS parser below instead.
The parser looks for rules in the form “selector { declarations }”: it reads color and background declarations and substitutes var(…). A rule that defines only the text color is checked against the page background—the value set on body or html, or white if neither has one.
| Selector | Text | Background | Contrast |
|---|
A text report for email and tracker tickets. CSS to add the pair to your project as variables. JSON to run the pairs through your own check during the build.
——Enter the text color and background color in any of these formats: #RRGGBB, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), or an English color name. You can paste a complete line from your code—“--brand: #1a73e8;” will be parsed just like a bare color.
Do not focus on the number itself; look at the threshold rows: 4.5 is the boundary for regular text, while 3 is the boundary for large text and non-text elements. The “your font size and weight” row answers the question for the text you entered in the sample.
If the pair fails, move the lightness slider below the field: the label below it shows the values at which the pair starts passing AA and AAA. The answer is already calculated in the “Nearest passing color” section, which also has a button to apply it.
Check text on a photo using an image: select a file in the “Sample” block, and the tool will find the lightest and darkest areas and calculate both pairs. The worse pair must pass.
Enable dark mode with the “Check the second pair” checkbox: inversion almost never preserves contrast, and both pairs must pass at the same time.
Check the entire palette with the grid: paste a list of colors, and a matrix of all pairs with pass/fail marks will appear. You can send the grid link in a chat—the state is stored in the URL.
Check an entire page with the bookmarklet in the “Entire page” section: it scans the live document in your browser. If you need to analyze the source files, drag a stylesheet file there.
Contrast = (L of the lighter color + 0.05) ÷ (L of the darker color + 0.05)
The standard is WCAG 2, which is used to calculate the main number. APCA from the WCAG 3 project is calculated in a separate section alongside it: it describes the readability of small and light text more accurately, but it is not yet a standard, so it cannot be cited in requirements.
The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.
White: each channel is 255, which becomes 1 after division by 255, and linearization does not change 1.
White luminance: L = 0.2126 + 0.7152 + 0.0722 = 1.
Black: each channel is 0, so L = 0.
Put the light color on top: (1 + 0.05) ÷ (0 + 0.05).
1.05 ÷ 0.05 = 21. A contrast ratio of 21:1 is the maximum possible in sRGB. It passes all levels. APCA gives Lc 106 for the same pair—the maximum on its own scale, whose limit is around 108.
For regular text, AA requires 4.5 and AAA requires 7. For large text—18 pt or 14 pt bold—the thresholds are lower: 3 and 4.5. Icons, field borders, and other non-text elements that convey the interface must have a contrast ratio of at least 3.
Because 4.5 is a hard cutoff, and luminance increases nonlinearly: the difference between adjacent gray values is measured in hundredths. #767676 is the lightest gray that still passes AA on white. Enter both colors and compare them.
Select an image in the “Sample” block. The tool will scale it down, find the lightest and darkest areas, and calculate the text contrast against both. The worse pair must pass; if it does not, add a background, darken the image, or use an outline.
Yes. A text color with alpha is composited with the background color, and a background color with alpha is composited with white. This is the same thing the browser does when it renders a translucent layer over the page.
APCA is a contrast model being developed for WCAG 3. It accounts for font size and weight and calculates dark text on light and light text on dark differently, so it describes readability better. But it has not been adopted: WCAG 2 is cited in requirements, contracts, and acceptance documents. APCA is shown here for reference in a separate section.
Because the contrast formula uses only luminance. A saturated blue and a pale blue with the same lightness produce almost the same number. That is why the slider and color picker change lightness specifically in HSL: the hue stays the same, the color remains recognizable, and the contrast changes.
Nowhere. All arithmetic, file reading, and style parsing run in the browser, and the page makes no network requests after loading. The bookmarklet for checking a page also runs entirely on your device: it does not contact our server or anyone else’s.
Yes. The pair is written to the URL as #767676-on-ffffff, and the ?fg=…&bg=… format is also supported. The “Link to pair” button copies the URL to the clipboard. The palette grid has its own button, which adds the full list of colors to the URL.
Reduces the file size of JPEG, PNG, and WebP—the file is never uploaded.
Open