Check text contrast with the actual foreground and background
Use luminance and transparent-color compositing instead of judging a swatch by eye.
Choose the pair that will be rendered
A color alone does not have a contrast ratio. Enter the foreground and an opaque background in the color converter. The tool computes sRGB relative luminance and compares the lighter and darker values. Pure black on pure white is 21:1; the same two colors reversed have the same ratio.
Read the right threshold
WCAG AA normal text uses a minimum of 4.5:1. Large text uses 3:1, and AAA normal text uses 7:1. The result applies each threshold to the unrounded ratio. The displayed ratio is truncated to two decimal places so a rounded-up number does not imply a pass. “Large” has a specific size/weight definition in WCAG; a large-looking preview alone does not establish that your site qualifies.
Transparency changes the effective color
A semi-transparent foreground is composited onto the selected opaque background before calculating luminance. For example, half-transparent black on white is effectively gray. A transparent background is rejected because its final surface is unknown. Images, gradients, overlays and video can create changing backgrounds that a single flat-color test does not cover.
Test the complete interface
A passing color pair is one check, not an accessibility certification. Inspect focus indicators, states, labels, zoom behavior, touch targets and text size as well. Do not communicate success or failure with color alone. Recheck the pair after exporting it to CSS or changing the background in the real component.