Contrastly — Tailwind CSS対応・OSSコントラストチェッカー

分断されていた作業を一つのインターフェースに集約

Tailwind CSSの色選択、カスタムHEXの入力、WCAGの判定結果を一つにまとめ、色の参照、変換ツール、コントラストチェッカーの間を移動せずに組み合わせを確認できるようにしました。

UIの色とセマンティックカラーの判断を支援

Tailwind CSSのカラーパレットとカスタムHEXを前景色・背景色として比較できるようにし、インターフェースの配色やセマンティックカラートークンに関する実践的な判断を支援する構成にしました。

ツール自体のアクセシビリティ

インターフェースにはセマンティックHTMLを使用し、キーボード操作とReduced Motionに対応しています。また、VoiceOverを使用した動作確認も行っています。公開後も継続的に改善を続けており、その一環として、ソースコードの静的検査にeslint-plugin-jsx-a11yを導入し、デスクトップとモバイルの主要画面・操作状態を対象としたPlaywrightテストにaxe-coreの検査を組み込みました。検出結果に基づく修正に加え、キーボード操作、フォーカス、ライブリージョンの更新、入力値の検証、WCAG判定結果の正確性についてもE2Eテストを実装しました。

公開から1年後にOSS化

2025年7月の公開後も継続してツールを保守し、2026年7月にコードベースを整理して、Sola StudioのOSSプロジェクトとして公開しました。IssueやPull Requestを通じて、ほかの開発者も改善に参加できる形にしています。