White Text on a Green Button: Measure Before Choosing

Enter the actual button colours

Start with #22c55e for the surface and #ffffff for the label. These are example colours; use computed browser styles for your project. Put the label in the foreground field and the button surface in the background field. Testing the page background instead would answer a different question. Begin with two solid colours.

Compare a dark label

Keep the surface and change the label to #111827. Compare the result before deciding which version to use. W3C AA text thresholds are 4.5:1 for normal text and 3:1 for large text. Read the tool’s pass/fail result rather than treating a rounded value as sufficient. Do not select large text merely to pass a small button label.

• W3C · WCAG 2.2 · Contrast (Minimum)

Check the other button states

If hovering changes the surface, test that pair separately. Reach the button by keyboard and check its label again. Repeat for dark mode if it uses different colours. A design file does not prove the rendered page uses the same values; inspect the actual CSS.

Finish on the real page

The checker compares two solid HEX colours; it does not audit an entire page. A photo, gradient or transparent layer may need additional examination. Apply the chosen pair to the real button, read it on a mobile screen and reach it with the keyboard. Record the colours and states you tested so a later theme update can be checked consistently.