Web, UI, and CSS
Check text contrast in light and dark themes
Tools to use
Text readable on your bright work monitor may look faint elsewhere. Making helper text less prominent can inadvertently make it hard to read. Contrast ratio summarizes the luminance difference between foreground and background. Before choosing by appearance alone, enter the two colors actually used.
Measure #777777 against white
Enter foreground #777777 and background #FFFFFF. About 4.478:1 is below the 4.5:1 AA threshold for normal text. Darkening to #767676 gives about 4.542:1. A small change crosses this boundary, but barely passing is not the design goal: inspect the actual font, weight and background with room for comfortable reading.
#777777 / #FFFFFF → 4.478:1
#767676 / #FFFFFF → 4.542:1
#000000 / #FFFFFF → 21:1The displayed ratio is rounded, but pass/fail uses the unrounded value. Do not round 4.499 up to claim a pass. Large text has a 3:1 AA threshold, but a heading label alone does not qualify it: size and weight matter. A palette meeting normal-text requirements is easier to reuse for helper text.
Translucent black does not retain black's contrast
rgba(0,0,0,0.5) on white gives about 3.977:1: the rendered text is gray after compositing. Copying only a black CSS color while ignoring parent opacity or layered backgrounds can overstate real contrast. Include the alpha conditions actually affecting the rendering.
A translucent background needs its opaque backdrop. The same panel over a white or dark page produces different results. The tool composites supplied colors but does not inspect your DOM or stacking. One color pair cannot evaluate an entire image, gradient or complex stack of transparent layers.
Check dark-theme pairs independently
#E2E8F0 text on #0F172A gives about 14.482:1, but helper text, links, selected rows and hover backgrounds have their own pairs. Check normal, hover, focus and selected states in each theme. This catches problems such as dark text remaining fixed when only the background changes.
Decide which color can change. A fixed brand color might work better as decoration or background while body text uses a more readable color. Underlines can help identify links without relying only on hue. The goal is readable information with its hierarchy preserved, not merely a larger ratio.
A passing pair is not a passing interface
Text can pass contrast yet be too small, tightly spaced or clipped on zoom. Check real content, long translations, 200% text enlargement and narrow screens separately. The preview helps evaluate a pair; it is not an automated audit of your page.
Red for error and green for success alone may not convey state to everyone. Add text or icons and visible focus. Do not treat a text-contrast result as automatically assessing boundaries, charts or focus indicators; check the relevant requirements and actual interaction separately.
Compare before and after under the same conditions
Share the text's role, foreground, background, alpha and before/after ratio rather than only saying it looked faint. Color conversion can normalize RGB or HSL notation, but does not itself improve readability. Distinguish notation changes from palette changes.
Return to the actual screen and complete the task from reading the corrected text onward. Use numbers to find problems and the real interface to check reading and operation. After fixing one pair, inspect other states and themes reusing those colors.
Measure component states, not just default body text
Readable body text on white does not cover selected cards, hovered links or red error text. Measure the foreground against the actual surface immediately behind it, including transparency. A translucent layer may make the page background the wrong comparison color. Check each meaningful state to identify the pair that needs correction.
Options include changing the background, removing transparency or promoting essential small text to normal body text, not only darkening the foreground. Use the criterion appropriate to the actual font size and weight rather than relabeling text to pass. As #777777 on white shows, a rounded display near 4.5 is not a reliable boundary decision; inspect the actual pass/fail result.
Return to the real screen after improving the ratio. Image backgrounds vary spatially, and thin or small text can still be difficult. Red alone is also insufficient to communicate an error; add wording or an icon and inspect focus states. Contrast is one important check, not an automatic grade for the entire interface.