2026-09-03 · 8 min read
- css
- accessibility
- design-systems
An RGBA or modern alpha color describes a layer, not the final pixel. The visible foreground and background depend on compositing order, inherited opacity, images, gradients, blend modes, overlays, and browser or operating-system adjustments.
Contrast evaluation must therefore use effective rendered colors for the relevant state and location. Comparing source tokens alone can approve text that fails over one theme, image region, or disabled-state background.
Trace the complete paint stack
Inspect computed styles from the element through every ancestor and pseudo-element that affects color or opacity. Composite layers in order over the actual opaque base rather than assuming the nearest declared background is final.
- Include parent opacity because it affects complete subtrees.
- Check overlays, shadows, blend modes, gradients, and images.
- Evaluate the least favorable background area behind text.
- Treat backdrop filters and dynamic media as rendered-state concerns.
Test every meaningful state
Measure default, hover, focus, active, selected, visited, disabled, validation, and loading states where their visual treatment changes. Repeat across light and dark themes, high-contrast preferences, and forced-color behavior.
Use exact values for threshold decisions and do not round a value upward to claim conformance. Test normal and large text using the applicable standard and product policy rather than treating one ratio as universal.
Design predictable semantic tokens
Prefer opaque semantic text tokens when content can appear on many surfaces. If transparency is required, pair the token with constrained surface tokens and document the allowed combinations.
- Keep text and icon roles separate from decorative colors.
- Provide tested theme pairs instead of free-form alpha reuse.
- Preserve visible focus indicators and non-color cues.
- Retest after opacity, image, or layering changes.
Verify rendered output
Use Flashman's color tool to explore opaque candidates, CSS formatter to trace variables and alpha declarations, diff to review theme changes, HTML entities tool for escaped labels, and Markdown editor to document approved token pairs.
Confirm final pages with browser accessibility tooling, automated checks, keyboard navigation, zoom and text scaling, representative displays, and human review. Static source calculations cannot fully model images, blending, antialiasing, or platform overrides.