Design tools
10 browser-based design and accessibility tools — check color contrast, simulate color blindness, preview font pairs, generate CSS code, optimize SVG, create favicons, resize icons, and more. No signup, no cloud, nothing leaves your device.
Design Tools
-
色盲模擬器
上傳圖片並查看綠色盲、紅色盲或藍色盲視角下的呈現,100% 在瀏覽器執行。
開啟工具 →
-
顏色對比度檢查器
檢查前景與背景顏色的 WCAG 2.1 對比度比例,即時顯示 AA/AAA 通過與否。
開啟工具 →
-
字體配對預覽
從 Google Fonts 挑選標題與內文字體,以即時範例文字一同預覽搭配效果。
開啟工具 →
-
CSS 陰影產生器
用即時滑桿視覺化建立 box-shadow 與 text-shadow CSS,一鍵複製。
開啟工具 →
-
CSS Clip Path 產生器
以互動式錨點編輯器建立 CSS clip-path 多邊形,即時輸出程式碼。
開啟工具 →
-
SVG 最佳化
貼上或上傳 SVG 檔案,移除中繼資料、註解與空白以縮減檔案大小。
開啟工具 →
-
Emoji Favicon 產生器
將任意 emoji 轉為 16、32、48、64、128、192px 的 favicon PNG,立即下載。
開啟工具 →
-
圖示尺寸調整
上傳 PNG 或 SVG 圖示,下載多種尺寸版本,適合製作 App 圖示與 favicon。
開啟工具 →
-
圖片轉圖示組
將任意圖片轉換為完整 iOS 與 Android App 圖示組,涵蓋所有標準尺寸,全程在瀏覽器中完成。
開啟工具 →
-
ASCII 藝術橫幅
將文字轉為 ASCII 藝術橫幅,支援多種字型風格,可複製貼到程式碼或 README。
開啟工具 →
Why browser-only design tools?
Design files, brand assets, and client icons are valuable intellectual property. Uploading them to a third-party service creates unnecessary risk. Every tool on this page runs entirely in your browser — paste freely, audit safely, share nothing.
From accessibility checks (color blindness simulation, WCAG contrast ratios) to code generation (CSS shadows, clip paths) to asset optimization (SVG minification, emoji favicons, icon resizing), every tool is built for the moments designers and developers need quick, private answers.
常見問題
- Do these tools upload my files anywhere?
- No. Every design tool on this page runs entirely in your browser. Your images, SVG files, and color choices never leave your device — not even temporarily.
- What is WCAG color contrast?
- WCAG (Web Content Accessibility Guidelines) defines contrast ratio thresholds for readable text. AA level requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA level requires 7:1 and 4.5:1 respectively.
- Can I use generated favicons commercially?
- Yes. The Emoji Favicon Generator renders standard system emoji onto a canvas in your browser. The resulting PNG files are yours to use freely.