In today’s digital landscape, making websites accessible to all visitors is not only a best practice, but also a moral responsibility. While investigating website accessibility, I came across the Web Content Accessibility Guidelines (WCAG)’s “The WCAG states that there are four main principles you’ll need to follow to create an accessible website: That your site is perceivable, operable, understandable, and robust.“
“The WCAG states that there are four main principles you’ll need to follow to create an accessible website: That your site is perceivable, operable, understandable, and robust.“
(Vettorino, 2024)
These principles act as a guide, for creating inclusive and inviting websites for everyone, regardless of ability.
At GSL Media, it is important that we are committed to ensuring that our client’s websites adhere to these principles. Prioritising components like giving text alternatives, enabling keyboard capability, preserving clear and understandable material, and guaranteeing HTML compatibility will help GSL Media to achieve the goal of meeting and exceeding accessibility standards, ensuring that every user can navigate and engage with our websites effortlessly.
During my research, I stumbled upon a powerful tool that has become an invaluable asset for accessibility: WAVE. This tool evaluates webpage accessibility comprehensively, examining factors such as links, contrast, colors, and images. By leveraging WAVE, we can conduct thorough accessibility audits and identify areas for improvement, ultimately enhancing the user experience for all visitors.
A way to work towards this goal of inclusive design within my role at GSL Media as designer I will continuously seek inspiration from exemplary accessible websites. Learning from industry leaders to seek and gather insights and best practices to refine our approach and push the boundaries of accessibility in web design.
When looking at my project for Ragnar Racking due to the branding I wanted to make use of the dark theme as I realise this is a growing trend and demand for dark theme websites. Dark themes, with their sleek and modern aesthetic, offer a unique user experience that many find appealing. They can reduce eye strain, especially in low-light environments, and may even conserve battery life on devices with OLED screens.
Dark mode can pose accessibility challenges due to issues such as difficult navigation, readability problems for certain users like those with dyslexia and astigmatism, and insufficient color contrast. However, when implemented correctly, dark mode can offer benefits like reduced eye strain and improved readability in low-light conditions. Providing high-contrast modes alongside dark themes can enhance accessibility and cater to a broader audience. Testing for WCAG conformance is crucial to ensure accessibility in dark mode implementation.
Dark modes, while popular, can present significant accessibility hurdles. According to the University of Michigan’s Dyslexia Help Center,
“Dyslexia affects a substantial portion of the population, with estimates ranging from 5-10% to potentially as high as 17% in the United States alone. When websites exclusively employ dark themes, users with dyslexia may struggle to perceive content naturally. Additionally, dark modes can adversely affect individuals with astigmatism, which impacts approximately 47% of people”, as noted by user experience expert H. Locke.
(Jack, 2021)
Dark backgrounds may increase focusing problems due to the “halation effect” generated by darker displays, which causes the iris to open wider to receive more light. Moreover, dark modes may fail to meet minimum color contrast requirements set by the Web Content Accessibility Guidelines (WCAG), potentially hindering readability for all users. As highlighted by WCAG,
“achieving sufficient contrast ratios, such as 4.5:1 for normal text, is essential for accessibility”.
(Indiana University 2023)
As I explore the website design for Ragnar Racking, I recognise the significance of embracing both the advantages and obstacles associated with dark themes. While I recognise their visual attractiveness and potential benefits, my design priorities remain unchanged: accessibility and usability come first. By seeking solutions that seamlessly integrate the dark theme aesthetic while incorporating functionalities for toggling between dark and light modes, I aim to ensure high contrast levels and legible text. My goal is to achieve a healthy balance by creating websites that not only have compelling visuals but also provide an amazing user experience for all visitors.
To summarise, my commitment to inclusive design is an ongoing process that necessitates constant devotion, innovation, and a firm commitment to servicing all people fairly. Empowered by tools like WAVE, I am confident in my ability to craft websites that not only meet my clients’ requirements but also enhance the experiences of all users through thoughtful UX/UI design. As illustrated in the screenshot above, I have adapted my website header based on my research, and I will continue to make tweaks to further improve accessibility and ensure an inclusive user experience.
References:
- Indiana University (no date) Indiana University Knowledge Base. Available at: https://kb.iu.edu/d/atgh#:~:text=For%20people%20with%20low%20visual,and%20its%20background%20is%20recommended. (Accessed: 29 April 2024).
- Jack (2021) Dark mode can improve text readability – but not for everyone, WCAG Audits, ADA Accessibility Audits & Section 508 Audits. Available at: https://www.boia.org/blog/dark-mode-can-improve-text-readability-but-not-for-everyone (Accessed: 29 April 2024).
- Vettorino, M.Z. (2024) Web accessibility: The ultimate guide, HubSpot Blog. Available at: https://blog.hubspot.com/website/web-accessibility#:~:text=fine%2Dtune%20it.-,Web%20Accessibility%20Standards,and%20apply%20to%20your%20site. (Accessed: 29 April 2024).
- Blog: Lebara UK (2024) How to use dark mode on mobile. Available at: https://blog.lebara.co.uk/how-to-use-dark-mode-on-mobile/#:~:text=It’s%20particularly%20beneficial%20at%20night,power%20to%20display%20darker%20colours. (Accessed: 29 April 2024).