The Web Content Accessibility Guidelines have certain standards to meet when it comes to choosing colour combinations for apps and websites. This ensures that the product is accessible to those with colour blindness or visual impairments, etc. It also makes content easier to read for the average user, so it benefits everyone.
Yellow text on a black background is one of the main colour combinations on the main screen so it was essential for this to be readable. The yellow and white text both passed when put against the black background.
Next, I tested the text on the blueprint. This is white text on a blue rectangle with reduced opacity. When I tested this, it failed the small text AAA. I decided to fix this as there is a chance small text would be used at some point on this page. When I increased the opacity from 30% to 40% and tested it again, it passed. You can see the change I made below.
The last thing I tested was the post-it-notes. These use black text on a light-yellow background. These colours contrast well so there was no issue with this passing. Most of the “read more” page uses these colours, so I am glad to know it is a fully accessible combination.
Overall, I found this helpful. It shows that just by making small, quick, and easy changes, you can make your website more accessible. I will be using the colour contrast checker site in the future at the beginning of projects. It will be more useful at the beginning rather than having to spend time making bigger changes at the end. I am happy that I was able to uncover at least 1 issue with colour on my site as it will make it that bit easier for my users to read.