Understanding color contrast: WCAG, APCA and fixing failing pairs
The WCAG 2.x contrast ratio
WCAG's contrast ratio compares the relative luminance of two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result runs from 1:1 (identical colors) to 21:1 (black on white). The same formula is used in WCAG 2.0, 2.1 and 2.2.
At level AA, normal text needs at least 4.5:1 and large text needs at least 3:1. At level AAA the numbers are 7:1 and 4.5:1. WCAG defines large text as at least 18 point (24 CSS pixels) or at least 14 point (about 18.66 CSS pixels) when bold. Anything smaller counts as normal text, so a 16px paragraph in regular weight must reach 4.5:1 for AA. The ratio is a pass or fail threshold, not a score: 4.4:1 does not meet 4.5:1, even if it looks fine.
APCA and Lc values
APCA, the Accessible Perceptual Contrast Algorithm, reports contrast as a lightness contrast value, Lc. It differs from the WCAG ratio in three ways. First, it is polarity-aware: dark text on a light background and light text on a dark background give different Lc values, and the sign of the number shows which is which (the magnitude is what you compare). Second, it models perceived contrast better for dark colors, where the WCAG formula tends to be generous. Third, the target depends on the size and weight of the text, so a thin 14px label needs a higher Lc than a bold 32px heading.
The APCA guidance maps font size and weight to a minimum Lc. As a rough orientation, body text at normal weight needs a magnitude in the range of Lc 75 to 90, while large headlines can work at lower values. Treat those numbers as a starting point and check the current APCA documentation for the exact lookup table, which has been revised over time. The checker shows both numbers next to live type samples so you can see what each one implies.
Which standard should you use?
WCAG 2.2 is the current W3C Recommendation, and accessibility laws and procurement requirements that mention WCAG point to the 2.x versions. If you need to show conformance, use the WCAG ratio. APCA is not part of WCAG 2 and is not required by it. It is being evaluated for the contrast guidance of the WCAG 3 working drafts, which are not finished and may change, so it is best described as a candidate rather than a standard.
A practical approach is to meet the WCAG thresholds as the baseline and use APCA as a second opinion, especially for light text on dark backgrounds or for thin and small type. When the two disagree, take the stricter result. The WCAG vs APCA guide compares them in more depth.
Non-text contrast: icons, borders and controls
Success criterion 1.4.11 (Non-text Contrast), added in WCAG 2.1, asks for a ratio of at least 3:1 against adjacent colors for the parts of user interface components that are needed to identify them, such as the border of a text input or the outline of a checkbox, and for graphics required to understand the content, such as chart lines. Disabled controls and purely decorative graphics are exempt, as are logos. Focus indicators fall under this rule too, so a faint focus ring on a white page is a common failure.
Common mistakes
Grey placeholder and helper text is the most frequent one. A light grey such as #999999 on white measures below 3:1, well short of 4.5:1, while #767676 on white is about the lightest grey that reaches 4.5:1. Placeholders are still text and need to be readable. The second is text over photographs: the contrast changes from one part of the image to the next, so add a solid or semi-opaque scrim behind the text and measure against the worst-case background.
Brand colors are the third. A mid-tone brand color often passes as a button background with white text in one shade and fails in another, and the same color used as text on white can be too light. Define a darker text variant of the brand hue instead of reusing the logo color everywhere. Also remember that states count: hover, disabled-looking and error text each need to be tested. For ready-made measurements of common combinations, the contrast pairs pages list ratios for named colors, and each color page shows its ratio on white and black.
Fixing a failing pair with OKLCH lightness
Contrast is mostly a function of lightness, so the cleanest fix is to change L and leave hue and chroma alone. Take the failing color into the OKLCH picker, lower L for text on a light background (or raise it on a dark one), and re-check until the ratio crosses the threshold. Because hue and chroma stay put, the color still looks like the same brand color, just deeper or lighter. If the chroma is high, you may also need to reduce it slightly so the result stays inside sRGB.
When changing the text color is not an option, move the background instead, or switch the roles of foreground and background. Larger or bolder text lowers the required threshold, but only to 3:1 under WCAG, so do not rely on size alone. To check ideas against real palettes, look through the palette library, or see how tokens are generated for your own system with the color API. The color meaning guides also list the ratio of each color on white and black, and the comparisons with Coolors and Adobe Color show how other tools handle contrast checks.