知覚可能
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/perceivable/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>
Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/perceivable/
Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/perceivable/)
Use the native HTML custom element.
WCAGの第一原則で、すべての情報とユーザーインターフェースのコンポーネントをユーザーが知覚できる方法で提示することを要求する。
The Perceivable principle encompasses all sensory aspects of web content. For color specifically, it means ensuring that text has sufficient contrast with its background (Success Criteria 1.4.3 and 1.4.6), that color is not the only visual means of conveying information (1.4.1), and that content can be presented in different ways without losing structure or information (1.3.1). In practice, this means adding text labels to color-coded elements, providing sufficient contrast ratios, and ensuring that focus states and interactive elements are visible without relying solely on color changes.
試してみる
関連記事
色校正:印刷色の正確さを確保する
ソフト校正、ハード校正、プレス校正技術を学び、スクリーンから最終出力まで印刷色再現の正確さを確保します。
シアンとターコイズの違い
シアン (#00FFFF) とターコイズ (#40E0D0) は似ていますが、色モデルの位置、彩度、用途が根本的に異なります。完全な分析です。
CSS での色アニメーション:トランジションとキーフレーム
CSS での色アニメーション、トランジション、キーフレームアニメーション、HSL 色相回転、知覚的な滑らかさのための OKLCH 補間、パフォーマンスのベストプラクティスをマスターしてください。
ウェブ開発者向け色アクセシビリティチェックリスト
ウェブ開発者向けの完全な色アクセシビリティチェックリストです。WCAG コントラスト比、色だけへの依存、フォーカスインジケーター、テストツール、自動チェックについてカバーしています。
色を「温い」または「冷たい」にするものは何か
温色と冷色は基本的なデザイン概念です。しかし、ルールはそれらが表示されるよりも微妙です。色の輪科学、相対温度、実践的なヒントを学びます。
人間の目は何色見ることができますか?
人間の目は約1000万色を区別できます。円錐細胞がどのように機能するか、テトラクロマシーが何であるか、画面が何しか見える一部のみを表示できる理由を学びます。