Build readable color pairs
Accessibility starts with how colors are used together, not whether an isolated palette looks good.
Measure the actual foreground and background
Check text against the surface behind it. If either is transparent, specify the opaque canvas under the layers. Do not round a value below a threshold into a pass.
Apply the relevant threshold
WCAG AA normal text needs 4.5:1. Large text needs 3:1, with large defined as at least 18pt regular or 14pt bold. Relevant non-text UI components use 3:1 under a separate criterion.
Give information another channel
A red border alone should not carry an error. Add a readable message and, where useful, an icon or shape. Vision previews can suggest problems but cannot represent every person’s experience.
Check the whole interface
Measure hover, disabled, error and focus states. Test keyboard access and content structure too. A passing color pair does not establish whole-page WCAG conformance.