Генератор доступної палітри кольорів
Підберіть гармонійну палітру кольорів для сайту чи дизайну — і одразу переконайтеся, що вона доступна: інструмент перевіряє контраст кольорів за WCAG і показує, як палітра виглядає для людей з дальтонізмом. Красиво і зручно для всіх. Безкоштовно.
сусідні відтінки — спокійна, «однотонна» палітра.
- #1B4A4B
- #2F6D83
- #437DBC
- #8799D4
- #CCCBE6
Матриця контрасту за WCAG
Рядок — колір тексту, стовпець — колір фону. Коефіцієнт рахується за справжніми кольорами (симуляція на нього не впливає).
| Текст / фон | #FFFFFF | #000000 | #1B4A4B | #2F6D83 | #437DBC | #8799D4 | #CCCBE6 |
|---|---|---|---|---|---|---|---|
| #1B4A4B | 9.86:1AAA | 2.12:1✗ | — | 1.70:1✗ | 2.30:1✗ | 3.54:1AA* | 6.22:1AA |
| #2F6D83 | 5.77:1AA | 3.63:1AA* | 1.70:1✗ | — | 1.34:1✗ | 2.07:1✗ | 3.64:1AA* |
| #437DBC | 4.28:1AA* | 4.89:1AA | 2.30:1✗ | 1.34:1✗ | — | 1.53:1✗ | 2.70:1✗ |
| #8799D4 | 2.78:1✗ | 7.53:1AAA | 3.54:1AA* | 2.07:1✗ | 1.53:1✗ | — | 1.75:1✗ |
| #CCCBE6 | 1.58:1✗ | 13.25:1AAA | 6.22:1AA | 3.64:1AA* | 2.70:1✗ | 1.75:1✗ | — |
- AAA — від 7:1
- AA — від 4.5:1
- AA* — від 3:1, лише великий текст
- ✗ — не проходить
Палітра генерується у вашому браузері: кольори, контраст і симуляція дальтонізму рахуються локально, нічого не надсилається на сервер.
Чому кольори мають бути доступними
Недостатній контраст робить текст нечитабельним для слабозорих, а «червоно-зелені» пари зливаються для дальтоніків (це ~8% чоловіків). Доступна палітра враховує це від початку.
Як користуватись
- 1Оберіть базовий колір або згенеруйте палітру.
- 2Дивіться контраст кожної пари (AA/AAA).
- 3Перемкніть перегляд «як бачать дальтоніки», щоб перевірити.
Часті запитання
Згенеруйте палітру й перевірте контраст пар за WCAG — інструмент підкаже, які поєднання читабельні.
Співвідношення яскравості тексту й фону; для звичайного тексту потрібно щонайменше 4.5:1.
Увімкніть перегляд симуляції — побачите палітру очима людей з різними типами дальтонізму.
Кольори — лише частина доступності. Перевірте весь сайт
Безкоштовний експрес-аудит покаже порушення WCAG за критичністю — за 2 хвилини, без реєстрації.
Перевірити сайт