Skip to content

[Accessibility] Used text color should have enough contrast with background #723

@Ionaru

Description

@Ionaru

When text is placed on a background that does not provide enough contrast with the text, that text becomes difficult to read or impossible to some.

Some of the deno_doc output does not provide enough contrast to meet the WCAG Level AA requirement of 4.5:1.

For example the Function & Method symbols on their backgrounds:

Image
Text color: #056cf0
Background color: #dae9fd

Image

A slightly darker color like #1b61dc would pass the requirement: https://contrast-finder.tanaguru.com/result.html?foreground=%23056CF0&background=%23DAE9FD&ratio=4.5&isBackgroundTested=false&algo=Rgb&distanceSort=asc

However with the current tailwind generation logic, setting another text color would probably also affect the background color.

Other sections that I found to have lacking contrast:

  • The Class symbol
  • The Variable symbol (also in dark mode)
  • The Interface symbol (also in dark mode)
  • documentNavigation links
  • symbolSubtitle, like "extends"
  • The word "Class"

There's maybe more, but I haven't seen all of the possible documentation.

More info: https://www.w3.org/TR/WCAG22/#contrast-minimum & https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions