Contrast ratio for button background color?

Buttons are User Interface Components so they need a contrast ratio of at least 3:1 against adjacent colors.

1. What is a good contrast ratio for colors?
2. What is a 4 5 1 contrast ratio?
3. What is the minimum color contrast that an icon should pass?
4. What is best contrast ratio for type legibility against a background?

What is a good contrast ratio for colors?

Color Contrast Ratios Guidance

Whenever using color in images, ensure that the colors have a contrast ratio of at least 4.5:1. This ensures that the text is still readable to those who may have color blindness.

What is a 4 5 1 contrast ratio?

The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

What is the minimum color contrast that an icon should pass?

The first test of the icon should be against the darkest (least contrasting) background that is adjacent to the icon color. If that is at least 3:1, it passes the success criterion.

What is best contrast ratio for type legibility against a background?

The WCAG recommendations you should aim for: At least 4.5:1 contrast ratio between text and background colours for text sizes smaller than 18 point if not bold or smaller than 14 point if bold.