I have made my portfolio website. It has some free cybersecurity tools that everyone must adopt. Any suggestions on improving this?
Great website. If I may point out an issue, in the Cyber-Security Tools page, the section The scale of the cyber threat with the Matrix-styled background is a bit hard to read — increasing font size and boldness might improve, but you might also want to improve color contrast there (or tweak the BG image).
You might use these online tools to ensure that the text foreground (and size) has a good contrast with the background, and obtain the actual accessibility scores of the current website:
Some articles on the topic:
- WebAIM » Understanding WCAG 2 Contrast and Color Requirements
- WebAIM » Testing Web Content for Accessibility
Also, always try to test text/BG color combinations for color-blindness accessibility (green being a color that is often perceived differently by users affected by color blindness).
I can’t think of a link to an online tool that does that, I usually develop color schemes using ColorImpact 4, which features a color blindness simulator that allow you to see any color scheme (and test images and texts) as they are perceived by the various types of color blindness.
I just want to add that if you’re using a Chromium-based browser (Chrome, Edge, etc.) you can emulate some vision deficiencies under Rendering in the devtools. 3 dots > More tools > Rendering, then scroll to the very bottom for the emulation options.
Sorry for disturbing, but I wanted to ask if the section is readable now.
I also checked for vision deficiency emulation. I had no issue in reading the text with all the emulations (except the blurred visoin).
Thanks for your help.
The situation has improved but there are still some spots where the BG image bright parts tend to “absorb” the text, e.g. around the “With the scale of the cyber threat …” text.
The section it’s not unreadable, but it definitely requires some effort on the reader’s side to focus on the text, which might be a deterrent for visitors who have vision difficulties. In my case, my sight is not good as it used be, and even with monitor dedicated glasses I find it a bit strainful to read that section. Since I spend many hours in front of the PC (which is by itself a strain on the eyes) I tend to skip website/pages that have hard-to-read color schemes.
I think that if you add a think black contour to the text in that section it would become much easier to read (like a very thin shadow/glow that separates the white text from the bright spots of the BG image).
Thanks for the tip @sethclydesdale, I didn’t realize Google had introduced these accessibility tool. That’s really cool, web/GUIs accessibility is a really important topic, and unfortunately an often neglected one too.
I’ve got into the habit of handling all my color schemes design and test work in ColorImpact because it supports color profiles, whereas historically most browser didn’t support color profiles at all —
nowadays Chrome and a couple of other browsers support color profiles, but some browser still don’t. Many applications don’t support color profiles either, including image previewers, so when it comes to colors fine-tuning I’m always careful to work with apps that I’m sure can handle colors correctly.
In case anyone needs it, I’ve posted an image to quickly test if an app supports color profiles: