a11yphant Homepage

Buttons - Level 05

Buttons

Instructions

When choosing the background and text color for your button, make sure there is enough contrast between the two colors. This makes it easier for users to read the button text.

Visually impaired users in particular rely on good color contrast. Otherwise they might be unable to read the button text at all.

The WCAGs recommend a contrast ratio of at least 4.5:1 between background and text. You can calculate the contrast between two colors using the free WebAIM Contrast Checker.

Currently the <button> has a light blue background and white text. Change the background color, the text color or both to reach a 4.5:1 contrast ratio.

index.html

On your computer: Press + m to use the tab key for site navigation.

The editor is loading...

index.css

On your computer: Press + m to use the tab key for site navigation.

The editor is loading...

Preview