search

istio / istio.io

Source for the istio.io site
https://istio.io/
Apache License 2.0
761 stars 1.54k forks source link

Main Website; WCAG 1.4.3: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds #12022

Closed A11Ybot-OP closed 8 months ago

A11Ybot-OP commented 2 years ago

Title: WCAG 1.4.3: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds (.panel-btn.btn) Tags: Accessibility, WCAG 1.4.3, color-contrast

Issue: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds (color-contrast - https://accessibilityinsights.io/info-examples/web/color-contrast)

Target application: Istio - https://istio.io/

Element path: .panel--dark.panel[href$="service-mesh"] > .panel-body > .panel-btn.btn

Snippet: <span class="btn panel-btn">Learn more</span>

How to fix: Fix any of the following: Element has insufficient color contrast of 4.19 (foreground color: #7dc5f2, background color: #3d5080, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1

Environment: Chrome version 104.0.0.0

A11Ybot-OP commented 2 years ago

5 other similar issue on the website

craigbox commented 2 years ago

Thanks, Mx. Bot! We'll put this on the backlog, given that (a) web is currently unstaffed, (b) the ratio is close-but-no-cigar (c) the button changes when mouse-over'd.

istio-policy-bot commented 11 months ago

🚧 This issue or pull request has been closed due to not having had activity from an Istio team member since 2022-09-29. If you feel this issue or pull request deserves attention, please reopen the issue. Please see this wiki page for more information. Thank you for your contributions.

Created by the issue and PR lifecycle manager.

craigbox commented 11 months ago

putting on the backlog for a proposed Q1 2024 site project.

craigbox commented 8 months ago

Our site accent color is #7dc6f2 but for some reason this panel is slightly different, with #7dc5f2. We don't use that color anywhere else.

I would be happy to have let this one slide because (a) the ratio is 4.19 and the target is 4.50 (b) the button changes colour on hover.

If we did want to change it, this site suggests we could go with #7dc6f8.

Change is in _panel.scss.

kfaseela commented 8 months ago

@adilmp1 probably a good issue for you to get started on

kfaseela commented 8 months ago

Fixed by @adilmp1