Skip to content

Color contrast: buttons within fields #2374

@aviannamiller

Description

@aviannamiller

Essentially all button elements (input[type=submit], button, a.button, .button) are styled with the same opacity: background-color: rgba(0, 0, 0, .08). Thus, while a button may in and of itself satisfy minimum color contrast requirements at 4.7:1 (when used against a white background, that is), its use within .field divs alters the contrast. These elements similarly bring in an opacity (background-color: rgba(0, 0, 0, .04)), and the button layered over this gains some degree of that background color, causing text to button bg contrast to dip below minimum contrast needs of 4.5:1 to around 4.4:1.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions