Skip to content

Add contrast information to contrast issues #1562

@amberhinds

Description

@amberhinds

Currently, contrast failures only save HTML code snippets and do not give any information about the HEX codes or color combinations that failed.

Image

This can be confusing for users, especially if the failure is on a hover or focus state.

It would be ideal if every view of a contrast issue (front-end highlighter, issue modal, and metabox) included:

  • color: (example: #777)
  • background-color: (example: #fff)
  • contrast ratio: (example: 4.47:1)
  • CSS saved as or with the code snippet, such as:
body {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    color: #777;
}

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions