WCAG 2.1 ratios
WCAG contrast is a relative luminance ratio (for example 4.5:1 for normal text, 3:1 for large text). It is the compliance baseline for many teams and audits — Colorise Pro reports it clearly next to live type.
How the WCAG formula works
Each sRGB channel is converted to linear light, and relative luminance is a weighted sum: L = 0.2126 R + 0.7152 G + 0.0722 B, running from 0 (black) to 1 (white). The ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter color on top, so it runs from 1:1 to 21:1 and does not depend on which color is the text. Under WCAG 2.1 and 2.2, level AA asks for 4.5:1 for normal text and 3:1 for large text, where “large” means at least 18 pt (about 24 px) or 14 pt bold (about 18.7 px). Level AAA asks for 7:1 and 4.5:1. Non-text parts of the interface that are needed to understand it, such as input borders and icons, need 3:1.
APCA Lc
APCA models perceived contrast with polarity awareness (light-on-dark vs dark-on-light). Lc values help when WCAG looks like a “pass” but type still feels weak — a common issue on dark dashboards and dense tables.
Reading Lc: polarity and rough bands
APCA returns a signed Lc (lightness contrast) value, with the text color and the background as separate inputs: positive for dark text on light, negative for light text on dark. Magnitudes run up to roughly 106 to 108. The method is intended to be read together with font size and weight, so any single number is guidance only. As a rough rule from the published draft guidance, an absolute Lc around 75 is a common floor for body text, around 60 for larger content text, and around 45 for large headlines and key UI elements; thin, small type wants more. APCA is a candidate for WCAG 3, which is still a draft, and it is not a legal or compliance requirement.
Computed comparison
Every value below is calculated on this page, with the text color first and the background second. The two metrics usually agree on broad pass or fail, but not always.
| Text | Background | WCAG ratio | AA normal | APCA Lc |
|---|---|---|---|---|
#000000 | #ffffff | 21.00:1 | Pass | 106.0 |
#767676 | #ffffff | 4.54:1 | Pass | 71.6 |
#ffffff | #0f172a | 17.85:1 | Pass | -106.8 |
#ffffff | #f97316 | 2.80:1 | Fail | -58.4 |
#000000 | #f97316 | 7.49:1 | Pass | 50.9 |
#2563eb | #ffffff | 5.17:1 | Pass | 74.9 |
- Black on white gives exactly 21:1 and an Lc a little above 100, the top of both scales.
#767676on white is the classic borderline pass at about 4.54:1, yet its Lc sits below the ~75 body-text guidance.- On orange (
#f97316, see the orange hub) the rankings flip: WCAG strongly prefers black text (about 7.5:1 against 2.8:1 for white), while APCA scores white text at a slightly larger magnitude than black. Neither is a great body-text choice, which is the real lesson: look at both, then view the real sample.
Check your own pairs in the Contrast Checker, or browse precomputed text and background combinations in the contrast hub. Dark surfaces are where the difference is usually felt first; the dark-mode colors guide covers that.
A workflow that respects both
Pass WCAG 2.2 AA for anything you must be able to defend in an audit, and treat APCA as a sanity check on how it feels at real sizes. If a pair passes WCAG but scores a low Lc, try more lightness separation before more chroma. When building token ramps, test the text-to-surface steps early, as described in Building OKLCH scales.
Practical rule
- Ship against WCAG when you need checklist compliance.
- Tune readability with APCA on real type sizes and weights.
- Always judge on samples — the Contrast Checker shows both on live UI text, with an Auto-Fix path when a pair fails.
Workflow that sticks
- Lock brand colors in OKLCH (Studio or Picker).
- Test critical pairs: body, captions, buttons, borders.
- Prefer raising L contrast before blasting chroma.
- Re-export tokens only after both WCAG and APCA look honest.
The same pair in both directions
A WCAG ratio ignores which colour is the text. APCA does not: the score depends on the order, and the sign tells you the polarity. The table swaps text and background for five pairs. The first column gives the Lc for the first colour as text; the second gives the Lc when the roles are reversed. The WCAG ratio is the same either way, for example 4.83:1 for the first pair.
The two magnitudes differ by between 1.7 and 5.5 Lc across these pairs, and the direction of the gap is not constant. White text on the mid grey (79.0) scores higher than the grey as text on white (73.6), while on the light-grey and slate pair the dark-on-light direction is a little higher (52.7 against 51.0). Enter the real foreground and background in the right order. See the Contrast Checker for live readouts and the dark-mode colors guide for what this means on dark surfaces.
| Pair | First | Second | WCAG | First as text | Second as text |
|---|---|---|---|---|---|
| Mid grey and white | #6B7280 | #FFFFFF | 4.83:1 | Lc 73.6 | Lc -79.0 |
| Light grey and dark slate | #9CA3AF | #111827 | 6.99:1 | Lc -51.0 | Lc 52.7 |
| Green and white | #16A34A | #FFFFFF | 3.30:1 | Lc 59.7 | Lc -65.2 |
| Blue and near-black | #3B82F6 | #0B1220 | 5.09:1 | Lc -37.2 | Lc 39.4 |
| Pale blue and navy | #BFDBFE | #1E3A8A | 7.29:1 | Lc -72.9 | Lc 71.0 |
Positive Lc is dark text on a lighter background; negative is light text on a darker one.
Where 4.5:1 and Lc part ways
To look for disagreement without cherry-picking, the page searched 792 text colours: six hues, lightness from 0.30 to 0.95 in steps of 0.01 at chroma 0.10, each on white and on #111827. Of these, 376 reach 4.5:1, and 166 of those have an absolute Lc below 75, the line the Contrast Checker uses for its body-text flag. Another 106 miss 4.5:1 yet have an absolute Lc of 45 or more, the Checker's UI flag.
The table shows the pair closest to the 4.5:1 edge in each case. The pattern is the useful part: on white, the lowest Lc among passing colours is 71.1, while on #111827 a colour that just passes 4.5:1 scores only 33.9. The same WCAG threshold sits at very different Lc values depending on the surface. This is a sample of two backgrounds and one chroma, not a general law.
| Case | Text | Background | WCAG | Normal text | Lc | |Lc| ≥ 45 | |Lc| ≥ 75 |
|---|---|---|---|---|---|---|---|
| Just passes 4.5:1 | #008388 | #FFFFFF | 4.56:1 | AA | 71.1 | Pass | Fail |
| Just misses 4.5:1 | #8E7426 | #FFFFFF | 4.49:1 | Fail | 71.1 | Pass | Fail |
| Just passes 4.5:1 | #558D57 | #111827 | 4.51:1 | AA | -33.9 | Fail | Fail |
| Just misses 4.5:1 | #B76B5F | #111827 | 4.46:1 | Fail | -33.7 | Fail | Fail |
Text colours are OKLCH chroma 0.10 mapped to sRGB; Lc is for the text colour on the background.
Font size and weight
APCA is designed to be read together with font size and weight: larger and heavier type needs a lower Lc, and small or light type needs a higher one. The published guidance expresses this as a lookup of minimum Lc by size and weight. Colorise Pro does not include that lookup. Its Contrast Checker applies two rough cut-offs to the absolute Lc, 45 for large or UI elements and 75 for body text, and the table above uses the same two.
So treat those flags as a quick screen. For a precise target, check the current APCA guidance for your size and weight, since it is still a working draft and may change, and then view the real sample on screen. WCAG 2.x has its own size rule, which is simpler: 3:1 applies to large text (at least 18 pt, or 14 pt bold) and 4.5:1 to the rest.
The mid-grey problem
Take a neutral grey as the background and choose the better of white or black text. Across all 256 greys, WCAG is weakest at #757575, where the better choice reaches 4.61:1. No grey drops below 4.61:1, so by ratio alone there is always a black or white text colour that clears 4.5:1.
APCA is less generous. Its weakest grey is #A3A3A3, where the better choice gives an absolute Lc of 54.6. 79 of the 256 greys leave both black and white under 75, and 21 leave both under 60. Mid-grey buttons and chips are therefore a place where a WCAG pass says little about comfort: increase the lightness gap, change the surface, or use larger and heavier text.
| Grey | White text | Lc | Black text | Lc | Best ratio | Best |Lc| |
|---|---|---|---|---|---|---|
#595959 | 7.00:1 | 89.2 | 3.00:1 | 19.7 | 7.00:1 | 89.2 |
#757575 | 4.61:1 | 77.5 | 4.56:1 | 32.0 | 4.61:1 | 77.5 |
#767676 | 4.54:1 | 77.0 | 4.62:1 | 32.5 | 4.62:1 | 77.0 |
#808080 | 3.95:1 | 72.4 | 5.32:1 | 37.2 | 5.32:1 | 72.4 |
#959595 | 3.00:1 | 62.0 | 7.01:1 | 47.4 | 7.01:1 | 62.0 |
#A3A3A3 | 2.52:1 | 54.6 | 8.33:1 | 54.5 | 8.33:1 | 54.6 |
#A6A6A6 | 2.43:1 | 52.9 | 8.63:1 | 56.1 | 8.63:1 | 56.1 |
Lc values are absolute; the grey is the background in every row.
Use both: what to report
For compliance, report the WCAG 2.x result: the ratio, the level (AA needs 4.5:1 for normal text, 3:1 for large text and for UI components) and which text size you assumed. That is the threshold audits and policies refer to today. Record APCA as supplementary readability data and label it that way, because it is a candidate method in a draft, not a ratified standard.
The table shows the fields to record, computed with the same helper the Checker uses. For the first pair, WCAG says AA for normal text at 4.83:1, while Lc 73.6 clears the 45 flag and misses the 75 flag. If the two disagree, fix the WCAG failure first, then improve the lightness gap until the real sample reads comfortably. The contrast hub lists precomputed pairs, and the scales guide shows how to plan these pairs into a ramp.
| Text | Background | WCAG ratio | Normal text | Large text and UI | APCA Lc | UI flag | Body flag |
|---|---|---|---|---|---|---|---|
#6B7280 | #FFFFFF | 4.83:1 | AA | AAA | 73.6 | Pass | Fail |
#9CA3AF | #111827 | 6.99:1 | AA | AAA | -51.0 | Pass | Fail |
#3B82F6 | #0B1220 | 5.09:1 | AA | AAA | -37.2 | Fail | Fail |
Last reviewed 2026-11-11.
Try it
Open the Contrast Checker, set foreground and background, and compare WCAG ratio next to APCA Lc before you lock a brand pair. From a palette, use Continue in → Contrast for a one-click handoff.