A bright brand color can look good in a palette and still make a button label difficult to read. Before choosing white text by habit, compare both white and black against the actual button background. A measured contrast ratio gives you a better starting point than judging a small swatch by eye.
This walkthrough uses the Color Converter to check an opaque blue button, adjust its shade, and record which states still need a separate review.
Start with the final solid background color
Paste the button’s HEX value into the tool’s color field. The converter updates its color formats, tints, shades and contrast results as you type. Its contrast panel compares that color with pure white and pure black.
Use an opaque color for this workflow. The tool explicitly ignores alpha when calculating contrast, and it does not provide an arbitrary second-background field. A translucent button over an image needs a check of the actual rendered color pair elsewhere.
Compare white and black labels on blue
In our tool check, the initial color #3b82f6 produced these displayed results:
| Button background | Label color | Displayed contrast | Normal-text AA result |
|---|---|---|---|
| #3b82f6 | White | 3.68:1 | Fail |
| #3b82f6 | Black | 5.71:1 | Pass |
| #2c62b9 | White | 5.91:1 | Pass |
| #2c62b9 | Black | 3.55:1 | Fail |
The first two rows suggest black text for that brighter blue. If the design calls for white text, a darker background is another option. We clicked the original blue’s Shade 25% swatch to load #2c62b9; its white comparison then passed the normal-text AA threshold.
This is a choice for this particular pair, not a rule that all blue buttons need darkening. Keep a note of the original color, candidate color and label color so the decision can be repeated in the stylesheet.
Apply the right text threshold
W3C’s Contrast (Minimum) guidance sets a 4.5:1 minimum for ordinary text at level AA, with a 3:1 threshold for qualifying large text. Large text generally means at least 18 points, or 14 points when bold. An ordinary small button label should be checked against 4.5:1.
The converter’s AA badges use the normal-text threshold. Do not interpret an AA fail badge as a complete assessment of every possible text size. Its ratios are displayed to two decimal places; W3C says threshold comparisons must use the unrounded result. Leave some margin rather than aiming for a displayed value exactly at the cutoff.
Put the candidate into a real button
For the darker blue and white label, a starting CSS declaration is:
.primary-action {
background-color: #2c62b9;
color: #ffffff;
}Check the computed text color in the browser, including any opacity inherited from a parent. A design-system token, a hover rule or a later stylesheet can override this small example. MDN’s CSS color reference explains the supported color representations; converting HEX to RGB changes notation, not the intended color.
Check states and boundaries separately
- Hover and pressed: repeat the label check for each background used in those states.
- Keyboard focus: tab to the button and inspect the visible focus indicator against the adjacent page colors.
- Icons and boundaries: check essential visual information used to identify the control, not just its text.
- Images and transparency: test the rendered pair over the actual content behind it.
W3C’s Non-text Contrast guidance explains the 3:1 requirement for relevant visual information in controls and graphics, including its exceptions. This is a separate check from text contrast. A passing label ratio alone does not establish that a whole button or website meets WCAG.
Finally, inspect the label at the sizes used on desktop and mobile. If the page also uses images, our image resizing guide covers a separate aspect of making those assets fit their layout without distortion.