This CSS file is primarily intended for testing the accessibility of a page in different scenarios. If you're looking for extensive debugging functionality, I'd recommend you check out a11y.css.
Add a11y-tests.css to your site or copy (part of) the declarations and add them to your existing CSS.
You can test your page by adding a class or multiple classes to the <html> element.
Test if you rely on color alone for conveying information.
<html class="a11y-tests-grayscale">
<head>…</head>
<body>…</body>
</html>
Simulate blurred vision.
<html class="a11y-tests-blur">
…
</html>
Force yourself to use your website without a mouse. This test sets cursor: none on all elements.
<html class="a11y-tests-no-mouse">
…
</html>Increases the base font size. This test will only work if you're using rem in your font-size rules.
<html class="a11y-tests-large-text">
…
</html>
Tests if your site works without transitions and animations.
<html class="a11y-tests-no-animation">
…
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent