実践的なカラーの知識

Web カラーと CSS のガイド

CSS の文字色、背景、リンク、カラー形式、コントラスト、混色、透明度を実践的な例で学べます。

WCAG に沿って文字色のコントラストをチェックする方法

前景色と背景色のコントラストを測り、AA と AAA の基準を理解して、基準を満たさない文字を勘に頼らず修正する方法。

読みやすいコントラストと予測どおりの色を保ちながら、単色・半透明・重ね合わせの CSS 背景を設定する方法。

見分けやすく、読みやすく、キーボード操作にもやさしいリンク、ホバー、訪問済み、プレースホルダーの色の選び方。

HEX、RGB、HSL が同じ画面の色をどう表すのか、アルファの仕組み、そして CSS でそれぞれの形式が役立つ場面を解説します。

HEX、RGB、HSL、カスタムプロパティ、アクセシブルな代替手段を使って、読みやすい文字色を CSS で確実に設定する方法を学びます。

画面の色がどう混ざるのか、アルファ合成で見える色がどう変わるのか、役に立つ段階スケールの作り方を学びます。