Next steps to a better website
Lighthouse - Additional items to manually check
In the Accessibility and SEO categories there are also some elements of the web page that Lighthouse can't automatically audit, but it does highlight the fact by stating:
Accessibility - Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so manual testing is also encouraged.
SEO - There are many additional factors Lighthouse does not score here that may affect your search ranking, including performance on Core Web Vitals.
For both these categories under "Additional items to manually check" you will find a list of the items it suggests need checking, each with a brief description, along with a link off to further information and help.
Dark mode
Dark mode isn't just a style choice, for many its an essential usability feature. That when done right, can enhance comfort and reduce eye strain. Though if done poorly, it can exclude many users entirely.
So to enhance your websites accessibility its a necessity that it has dark mode theme, whether done from within your CSS file with light-dark variables, or by using a theme picker and JavaScript. The question is, how do you know if your website has it, and if so, how can you test its accessible?
To check if you have dark mode setup in your CSS is a fairly quick test.
If you have an Edge or Chrome browser - With your website open in your browser, open DevTools.
On the left hand side of the elements panel you will find the Styles pane, click on the "Toggle common rendering emulations" icon.
Then select prefers-color-scheme:dark
If you see no change then you probably don't have a dark mode colour scheme set up for your website, which is something you should probably address with your web team or designer. For those who know they have a darkmode in place, doing the above test will show if its working or not.
Once you know you have a darkmode, how can you know if it meets with current accessibility standards or whether all elements across your site work in dark mode? As often people consider colour changes for text, headings and background elements, but do your icons and images work here too?
The good news is while you have prefers-color-scheme:dark enabled you can run lighthouse again and it will audit the accessibility of your webpage as it sees it in dark mode.
Though for elements such as icons and images you may need to further manually check them to see if they show up clearly against a darker background, especially any images that have a transparent background.
PageSpeed Insights
If you don't use a Edge or Chrome browser it is still possible to run a Lighthouse audit to benchmark your website by going to Google for Developers PageSpeed Insights page. Once there all you need to do is add the URL of the webpage you wish to audit into the blue bordered Enter a web page URL box provided, then click on the blue Analyze button and it will then run a full audit of the webpage. Unlike using DevTools it provides both mobile and desktop audits at the same time, which you can alternate between using the tabs at the top of the report.
Next PageLearn how to test in your Mac browser now »
Further Resources
JWS Docs Browser Dev Tools intro - Toggling Dark Mode
JWS Docs JWS Style Variables - Dark Mode