docs: insufficient contrast in some documentation UI elements

[ludofischer]

Description

When I visit the documentation website at https://ark-ui.com/, I expect the color contrast ratio to pass the minimum success criterion in the WCAG 2 accessibility guildelines (success criterion 1.4.3 level AA). Ark UI links to the WAI ARIA patterns for each component, so I would expect the website itself to pass the accessibility success criteria.

Link to Reproduction (or Detailed Explanation)

https://ark-ui.com/

Steps to Reproduce

Access https://ark-ui.com/docs/overview/getting-started and run an accessibility check using the built-in tools in Firefox. Color contrast is insufficient in both light and dark mode. The contrast should be 4.5 for body text to pass the success criterion at level AA.

1. Footer: the contrast ratio between the "Next" and "Previous" words and the background is too low in light (3.8) and dark mode (4.45)
2. Comments inside the code sample. The contrast ratio is 3.60, in light and dark mode.
3. The 'New' labels in the table of contents have contrast ratio 3.38.
4. Highlighted text in light mode. The contrast ratio is too low on the highlighted, orange words in the table of content, both on white background (4.43) and light orange background (4.17)

Ark UI Version

3.0.0

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

https://www.w3.org/TR/WCAG21/#contrast-minimum

[cschroeter]

@ludofischer

Thank you for bringing this to our attention. The design of the website has grown historically and will definitely need to be adapted in the near future.