Contrast Line

Try it

Contrast Line

文字色を目で調整し、自分の見え方とWCAGのコントラスト基準との距離に気づくためのサイトです。

A site for adjusting text color by eye and noticing the distance between your perception and WCAG contrast requirements.

使い方Guide

背景色は固定です。スライダーで文字色だけを動かして、アクセシビリティの合格ラインぴったりだと思う場所でDoneを押します。比率はDoneするまで表示されません。

合格ラインを0.01点でも下回ると0点です。合格ラインを超えた場合は、ラインに近いほど高得点になります。

The background color is fixed. Move only the text color with the slider, then press Done when you think the color is right on the accessibility threshold. The ratio stays hidden until you press Done.

If the ratio is below the threshold, the score is 0. Once it passes, the closer it is to the line, the higher the score.

Contrast LineについてAbout Contrast Line

色の組み合わせがWCAGのコントラスト基準を満たしているか判定するツールは、すでに数多くあります。一方で、数値を見る前に、自分の目が「読める色の境界」をどのあたりに感じるのかを確かめられる場所は、あまり見かけませんでした。

Contrast Lineは、正解を当てたり、アクセシビリティの知識や能力を競ったりするためのサイトではありません。文字色を自分の目で調整したあとに、結果とWCAGの基準を見比べることで、自分の感覚と基準との間にどのくらいの距離があるのかを知るためのサイトです。

繰り返し試すことで、Web制作に携わる人がコントラストに対する感覚を養うきっかけにもなればと考えています。ただし、その感覚だけで色を決められるようになることが目的ではありません。自分の目による判断には個人差があることを知り、数値による確認がなぜ必要なのかを実感してもらうことを大切にしています。

WCAGのコントラスト基準は、中程度の視力低下や、文字と背景の違いを捉えにくい人を含め、より多くの人がテキストを読めるようにするために設けられています。色の違いだけでなく、文字と背景の間に十分な明暗差を確保することが、読みやすさにつながります。

このサイトは、Web制作やアクセシビリティに携わる人だけを対象にしたものではありません。「自分には読めているけれど、このコントラストでは読みづらい人がいるかもしれない」と知るきっかけとして、デザインや実装の経験がない方にも気軽に使ってもらえたらと思っています。

見え方は、視力や年齢、周囲の明るさ、使用するディスプレイなどによって変わります。ここでの結果だけで読みやすさを判断せず、実際の制作では測定ツールとWCAGの基準を使って確認してください。

Contrast Lineは、測定ツールの代わりではありません。自分の感覚と基準との違いを知り、人によって見え方が異なることに目を向けるための、小さな体験ツールです。

There are already many tools for checking whether a color pair meets the WCAG contrast requirements. What seemed far less common was a place to sense, before you see any number, roughly where your own eyes place the boundary of a color that is still readable.

Contrast Line is not a site for guessing a correct answer or for comparing anyone's accessibility knowledge or ability. It is a place to adjust the text color with your own eyes, then compare the result against the WCAG requirements and see how much distance lies between your perception and the standard.

By trying it again and again, we hope it can help people who work on the web build a feel for contrast. Even so, the goal is not to be able to choose colors by that feel alone. What we value is that you come to know how much judgment by eye varies from person to person, and feel for yourself why verifying against the numbers is necessary.

The WCAG contrast requirements exist so that more people can read text, including those with moderate vision loss or difficulty telling text and background apart. More than a difference in color, securing enough difference in lightness between text and background is what leads to readability.

This site is not meant only for people who work in web production or accessibility. As a way to notice that a contrast you can read yourself may be hard for someone else to read, we would be glad if people with no design or development experience felt free to use it as well.

How things look changes with eyesight, age, the surrounding brightness, the display you use, and more. Please do not judge readability from this result alone; in real production work, verify with a measurement tool and the WCAG requirements.

Contrast Line does not replace a measurement tool. It is a small, hands-on experience for coming to know the difference between your own perception and the standard, and for turning your attention to the fact that people see differently.

コントラスト基準とは？Understanding contrast requirements

4つの名称は、WCAG 2.2のコントラスト基準のレベル（AA / AAA）と、文字の条件（normal / large）を組み合わせたものです。コントラストを確保することは、弱視や加齢などによって文字と背景の違いを捉えにくい人を含め、より多くの人が内容を読み取る助けになります。

  • AA normal通常サイズの本文やラベルに対する最低基準。4.5:1以上が必要です。
  • AA large大きな文字に対する最低基準。3:1以上が必要です。
  • AAA normal通常サイズの文字に対する、より高い基準。7:1以上が必要です。
  • AAA large大きな文字に対する、より高い基準。4.5:1以上が必要です。

ここでいうlargeは、24px以上の通常ウェイト、または約19px以上の太字が目安です。文字が大きく太いほど形を捉えやすいため、normalとは異なる比率が設定されています。AAはコントラスト項目の最低基準、AAAはさらに高いコントラストを求める基準です。どちらも「この比率なら誰にとっても必ず読める」と保証するものではありません。

詳しい定義と考え方は、W3CによるWCAG 2.2の「コントラスト（最低限）」と「コントラスト（高度）」を参照してください。

These four labels do not divide people into four groups. They combine a WCAG 2.2 conformance level (AA or AAA) with a text condition (normal or large). Sufficient contrast helps more people perceive content, including people with low vision or reduced contrast sensitivity.

  • AA normalThe minimum requirement for normal-sized body text and labels: at least 4.5:1.
  • AA largeThe minimum requirement for large text: at least 3:1.
  • AAA normalThe enhanced requirement for normal-sized text: at least 7:1.
  • AAA largeThe enhanced requirement for large text: at least 4.5:1.

Here, large text means at least 24 CSS pixels at regular weight, or about 19 CSS pixels when bold. Larger, heavier letterforms are easier to distinguish, so they have different thresholds from normal text. AA is the minimum contrast requirement, while AAA asks for stronger contrast. Neither level guarantees that every person will be able to read the content.

For the full definitions and rationale, see W3C's WCAG 2.2 guidance for Contrast (Minimum) and Contrast (Enhanced).

制作者Creator

Xでは、「せきゆおう」というアカウントで活動しています。

Webクリエイター。業界歴15年以上。複数の制作会社で経験を積み、受注から納品までを一貫して一人で担当してきたこともあり、デザインと構築の橋渡しとなる設計や、制作フローの効率化を得意としています。

2020年1月に個人事業主として独立し、同年4月に「せきゆおう」アカウントを開設。現在はWeb制作全般に加え、紙媒体やUIデザインも手がけています。

2023年にColosoで講座をリリースし、同年上半期のカテゴリ別BEST講座を獲得。2025年にはCSS Niteで単独登壇しました。

  • オンラインコミュニティ「シナカフェ」を共同運営。最大約350人が参加。
  • 株式会社CRANKS様の育成スクール「SLash」に講師として登壇。
  • VantanテックフォードアカデミーにてHTML/CSS講師を半年間担当。
  • 『Web Designing』2023年2月号にて、運営コミュニティの特集が掲載。
  • Vantanテックフォードアカデミーにてセミナーを開催。
  • マイナビクリエイター MATCH BOX様とシナカフェのコラボウェビナーを開催。
  • Colosoにて「ゼロから学ぶ実践的なコーディング＆スキルアップ講座」をリリース。
  • 宣伝会議様『月刊ブレーン』今月のブックマーク Vol.151に掲載。
  • Voicyにて「アブラジオ」をスタート。
  • CSS Nite主催「朝までマークアップ」に出演。
  • ManaのWebクリエイターカフェ #71に出演。
  • YouTube「あらぶるチャンネル」をスタート。
  • Colosoの講座がカテゴリ内のベスト講座を獲得。
  • RaiseTechにて「プロジェクトを成功へ導くWebデザイン」に登壇。
  • CSS Nite主催「朝までマークアップ2」に出演。
  • CSS Niteにて「コーダーをダメにするFigmaデザインデータ」で単独登壇。
  • Powered by TV #34に出演。
  • 三重県クリエイター会を共同開催し、約30人が参加。
  • マイナビクリエイター MATCH BOX「手戻りを最小限に抑える 効率的かつ円滑なプロジェクトを実現するFigmaデザインデータ」に出演。
  • 東京でFigma勉強会を開催し50人が参加。
  • 株式会社GIG様のYouTubeに出演。
  • ひろクリギルドにて「迷惑をかけないFigmaデザインのつくりかた」に登壇。有料ウェビナーの過去最高参加者数を記録。
  • 株式会社LIG様にて「AIで平均点が量産される今、せきゆおうが語る『デザイナーの現在地とこれから』」に登壇。

X Instagram

A web creator with more than 15 years of industry experience. After working at multiple production companies, I have often handled the full process from receiving a project to delivery, and I specialize in bridging design and implementation while improving production workflows.

I became an independent sole proprietor in January 2020 and opened the "Sekiyuo" account in April of the same year. Today, I work across web production, print media, and UI design.

In 2023, I released a course on Coloso and received the category BEST course award for the first half of that year. In 2025, I gave a solo session at CSS Nite.

  • Co-ran the online community Shina Cafe, which grew to around 350 participants.
  • Spoke as an instructor for CRANKS Inc.'s training school, SLash.
  • Worked for six months as an HTML/CSS instructor at Vantan Techford Academy.
  • The community I operated was featured in Web Designing, February 2023 issue.
  • Released a practical coding and skill-up course on Coloso.
  • The Coloso course was selected as a best course in its category.
  • Spoke at RaiseTech: Web Design That Leads Projects to Success.
  • Gave a solo CSS Nite session about Figma design data that makes coders struggle.
  • Spoke at Mynavi Creator MATCH BOX about Figma design data for smoother projects.
  • Hosted a Figma study event in Tokyo with 50 participants.
  • Spoke at LIG Inc. about the current and future position of designers in the AI era.

X Instagram