Tip:
Highlight text to annotate it
X
WOMAN: Hello, my name is Joy Robey, and I test for readability, dyslexia and colour contrast issues.
The first issue that I've picked up on is the black text on the pink background.
I don't think it's actually black. The reason I say that is we go into my script.
This is the first screenshot that I've taken. As you can see, the text only has a contrast ratio of 3.3:1,
which has failed the colour contrast analyser.
When I closely to the colour contrast analyser and picked up the dropper, I go back on to the page.
I take the first dropper.
By picking up the first colour section and then making the text two sizes darker in colour, sorry two shades darker in colour,
it then gives you a higher ratio which passes the colour contrast analyser as shown in my script.
It needs to be at least 4.5:1 to pass AA standard.
If we go to another colour issue I've picked up, same sort of issues have arisen here as well,
where you've got red text or pink text on the yellow background. Again, the ratio is only 3.5:1.
But if you darken that text by two shades again, you'll get a 5.5:1 ratio which passes AA standard.
And it makes it clearer for the user who has impaired vision.
Right, I've come across another issue with text resizing.
If you resize the page via zoom to its largest size, you can see that there is an inconsistency with the top boxes here.
They're all the same size except when it comes to the end MarketPlace.
If I take resizing back off just for you to recheck what I'm saying, all of these boxes are now exactly the same.
So there is an inconsistency there.
There isn't any text being hidden from the user, so I don't think that is gonna be a fail,
but I think it just needs to be adjusted along these top boxes.
Also in the search area, the text within the searchbox has become hidden, partly hidden to the user,
and the word search has now been split into two in this area here.
So that's the text resizing issues which, this needs to be addressed.
When you're applying text resizing, all the text and images within the page should stay in situ.
They shouldn't move, and they shouldn't be hidden from the user at any time,
cause this can result in fail under WCAG 2.0.