website icon indicating copy to clipboard operation
website copied to clipboard

Accessibility bug - Ensure active user interface components have sufficient contrast

Open yoshjurkic opened this issue 5 months ago • 9 comments

Describe the problem

The color contrast ratio of the active focus outline for the "Show/Hide Password" button is less than 3.0:1. There are focus outlines for elements with a contrast ratio below 3.00:1.

Foreground color: #FBEDED Background color: #FFFFFF Contrast ratio: 1.13:1

Expected fix

Ensure active focus outline for user interface components has sufficient contrast. The required minimum contrast ratio is 3.00:1.

Common examples of qualifying components include text field borders, check marks for checkboxes, fillings for radio buttons, focus indicators, and icon-only controls. Non-interactive controls are exempt from this requirement.

Image

On which browser(s) did you experience this issue?

No response

Additional context

For more information about Non-text Contrast, please see the W3C Web Accessibility Initiative's ARIA Authoring Practices Guide: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html

I would like to fix this problem.

  • [x] #12412

yoshjurkic avatar Jul 21 '25 16:07 yoshjurkic

Hi team,
Just following up on this issue — it’s been open for a month and was flagged by an accessibility consultant as a violation.
Is there any update or someone who could take a look? Happy to provide more details if needed.
Thanks!

yoshjurkic avatar Aug 18 '25 15:08 yoshjurkic

Bump this Accessibility Bug

yoshjurkic avatar Sep 08 '25 14:09 yoshjurkic

@parlough, can you take a look?

sfshaza2 avatar Sep 08 '25 17:09 sfshaza2

@parlough Any Update on this?

yoshjurkic avatar Sep 29 '25 15:09 yoshjurkic

Hi, @yoshjurkic, while this is important, @parlough is super busy. He recently finished porting the Dart website to Jaspr, so now it uses Dart. He's doing the same for the Flutter website.

sfshaza2 avatar Oct 01 '25 16:10 sfshaza2

Hi @sfshaza2 & @parlough, thanks for the update and congrats on the Dart website migration to Jaspr that’s a big milestone! Totally understand you're deep in the Flutter website porting work. Just wanted to keep this accessibility issue visible, as it’s native to Flutter and impacts users relying on assistive technologies. We’re happy to provide additional context or help validate fixes when the time is right. Appreciate all the work you're doing looking forward to seeing the improvements roll out!

yoshjurkic avatar Oct 01 '25 19:10 yoshjurkic

Hey, @yoshjurkic, I briefly discussed this issue with @parlough last week. Are you filing this bug specifically against the Flutter website? Or is this an issue against the Flutter SDK?

sfshaza2 avatar Oct 08 '25 00:10 sfshaza2

Hi @sfshaza2, This appears to be native to the Flutter SDK itself.

Thanks,

Yosh

From: Shams Zakhour @.> Date: Tuesday, October 7, 2025 at 8:11 PM To: flutter/website @.> Cc: Yosh Jurkic @.>, Mention @.> Subject: Re: [flutter/website] Accessibility bug - Ensure active user interface components have sufficient contrast (Issue #12226) CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

[Image removed by sender.]sfshaza2 left a comment (flutter/website#12226)https://github.com/flutter/website/issues/12226#issuecomment-3379110873

Hey, @yoshjurkichttps://github.com/yoshjurkic, I briefly discussed this issue with @parloughhttps://github.com/parlough last week. Are you filing this bug specifically against the Flutter website? Or is this an issue against the Flutter SDK?

— Reply to this email directly, view it on GitHubhttps://github.com/flutter/website/issues/12226#issuecomment-3379110873, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BU6GWXHG4UQTT7EPMQ55JBL3WRJCRAVCNFSM6AAAAACCAJOITCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTGNZZGEYTAOBXGM. You are receiving this because you were mentioned.Message ID: @.***>

yoshjurkic avatar Oct 08 '25 14:10 yoshjurkic

Hi, @yoshjurkic! If that's the case, this is filed on the wrong repo. You should file this against the flutter/flutter repo. This repo is purely for our website.

sfshaza2 avatar Oct 08 '25 19:10 sfshaza2