A11y: "Find Properties" and "Learn more" text doesn't pass the minimum contrast requirement

CodeForPhilly / clean-and-green-philly

Dashboard to target Philly vacant properties for anti-gun violence interventions

https://www.cleanandgreenphilly.org/

MIT License

31 stars 63 forks source link

A11y: "Find Properties" and "Learn more" text doesn't pass the minimum contrast requirement #297

Closed marvieqa closed 7 months ago

marvieqa commented 9 months ago

Description

The text color used for "Find Properties" & "Learn more" doesn't match the minimum contrast requirement of 4.5:1 ratio. It needs a darker green to pass.

EDIT by @bacitracin as of 3/9/2024: The design has been updated and these buttons have moved, but contrast still needs to be checked. Use https://colourcontrast.cc/ and make sure it passes to AA Large, AAA Large, and AA Normal.

OLD DESIGN:

NEW DESIGN:

Source page: https://staging.cleanandgreenphilly.org/
WCAG Criteria: 1.4.3 Contrast (Minimum) Level AA

marvieqa commented 9 months ago

Note: For anyone picking up, we should ping @thansidwell to see what color we can work with in line with the overall design.

bacitracin commented 8 months ago

Updated 3/9/2024, the design has changed but buttons still need to be checked for contrast

Moylena commented 8 months ago

@thansidwell should we determine what color passes then update the Figma file with the final result?

thansidwell commented 7 months ago

@Moylena This is now resolved. The new buttons all pass contrast requirements. I think we can archive this ticket.

marvieqa commented 7 months ago

closing ticket as resolved!