視力體驗儀

讓視力正常的人，親身感受低視力族群的閱讀困境。

透過即時 CSS 濾鏡模擬近視、遠視、散光、老花眼在不同距離與光線下的視覺效果，依台灣視力標準換算度數，幫助使用者建立對視力障礙的同理心。

線上展示

https://ryanchen0311.github.io/vision-simulator/

預覽

功能

• 5 種視力狀況：正常視力、近視、遠視、散光、老花眼
• 即時視覺模擬：根據視力值套用模糊、重影等 CSS 濾鏡效果
• 台灣度數換算：自動換算近視／遠視／散光／老花度數（單位：度）
• 可調整參數：
  • 視力嚴重程度（0 → 10 級）
  • 觀看距離（30 ～ 600 公分）
  • 光線環境（極暗 ～ 刺眼）
  • 字體大小（極小 ～ 巨大）
  • 自訂測試文字
• 資訊面板：即時顯示視力等級、建議度數、清晰度、眼睛疲勞程度

視力標準對照表

等級	視力值
正常視力	1.0
輕度近視	0.8 ~ 0.6
中度近視	0.5 ~ 0.1
高度近視	< 0.1

使用方式

直接在瀏覽器開啟 index.html 即可，無需任何安裝或建置工具。

git clone https://github.com/RyanChen0311/vision-simulator.git
cd vision-simulator
start index.html   # Windows
open index.html    # macOS

技術

純 HTML / CSS / JavaScript，無任何外部依賴。

vision-simulator/
├── index.html        # 頁面結構
├── css/
│   └── style.css     # 樣式與 RWD
└── js/
    ├── vision.js     # 視力計算邏輯
    └── ui.js         # DOM 操作與事件綁定

License

MIT