How do we fix these errors
Isaac
what does contrast errors mean? it's not readable?
Notified 1 person
Isaac Klausnser
whitney.zelig@gmail.com
-
what does contrast errors mean? it's not readable?
Yes, as per the report text is not readable in 61 different places on the website.
Notified 1 person
whitney.zelig@gmail.com
Oh no, how can we fix that?
and what can we do to prevent that in the future?
Notified 1 person
Isaac Klausnser
whitney.zelig@gmail.com
- Please check the screenshot attached. This should help you with all your queries regarding this issue.
To avoid this in the future. We need to make sure we follow the contrast ratio of 4:5:1 for small text and for larger text 18px+ ratio less than 3:1 as recommended in the below screenshot.
whitney.zelig@gmail.com
- We need to manually change the color of the elements on the website following the contrast ratio mentioned in the screenshot.
Selena should be able to help us with this.
Selena
- Can you please check the below report and update the colors accordingly so we don't have any ADA-compliant errors on this website?
Isaac
I followed instructions from the WAVE report and I reduced the number of contrast errors, but still, there are 31 of them. Even when I remove the background and put just black background with a white heading on the top it still shows an error. It's so annoying, cause there are other sections with black background and there's no contrast error.
Also, look at this example https://monosnap.com/file/jhWB5mReS8VGJIb0gW0HSNXLVjgynn There's no error on main heading on the hero section even if there's smaller opacity, and there are errors on header (which has a dark overlay). So strange.
I checked all attached images and videos in media in dashboard and we are not misssing ALT anywhere. We also don't have empty links. I don't have an idea how to get rid of those errors. If you have some tips please tell :)
I finished with the homepage, I will apply changes to other pages.
Notified 2 people
Selena Vujatov
Isaac
I applied instructions from report to other pages as well
https://wave.webaim.org/report#/desuar.com
what does contrast errors mean? it's not readable?
Yes, as per the report text is not readable in 61 different places on the website.
and what can we do to prevent that in the future?
To avoid this in the future. We need to make sure we follow the contrast ratio of 4:5:1 for small text and for larger text 18px+ ratio less than 3:1 as recommended in the below screenshot.
Selena should be able to help us with this.
https://wave.webaim.org/report#/desuar.com
Also, look at this example https://monosnap.com/file/jhWB5mReS8VGJIb0gW0HSNXLVjgynn
There's no error on main heading on the hero section even if there's smaller opacity, and there are errors on header (which has a dark overlay). So strange.
I checked all attached images and videos in media in dashboard and we are not misssing ALT anywhere. We also don't have empty links. I don't have an idea how to get rid of those errors. If you have some tips please tell :)
I finished with the homepage, I will apply changes to other pages.