> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Hình khoa học: Giữ ý nghĩa khi không có màu

> Kiểm tra sơ đồ khoa học ở thang xám bằng nhãn, hình dạng và kiểu nét. Dùng ví dụ SVG đầy đủ để giữ khả năng nhận diện điều kiện mà không đổi dữ liệu.

Source: https://perfectvector.com/vi/blog/scientific-figure-color-redundancy

Language: vi
Author: Irene Kim
Published: 2026-10-15T08:00:00+09:00

Để sơ đồ khoa học hoạt động khi không có màu, cho mỗi điều kiện quan trọng một dấu hiệu nhận diện nhìn thấy ngoài sắc màu. Thêm nhãn trực tiếp, phân biệt các ký hiệu hoặc kiểu nét phù hợp, rồi kiểm tra bản thang xám ở kích thước hiển thị dự định. Bảng màu khác có thể giúp, nhưng không thể đặt tên cho điều kiện thiếu nhãn.

Hướng dẫn này đề cập sơ đồ giải thích theo nhóm: hình sơ đồ thể hiện hai điều kiện, nhóm hoặc tuyến. Nó dùng tệp SVG (Scalable Vector Graphics) hai hàng gốc, không có dữ liệu thực nghiệm. Bản đồ nhiệt liên tục, ảnh hiển vi và đồ thị đo cần cách xử lý riêng có xét dữ liệu; đừng đồ các dấu của chúng thành hình mới chỉ để trông rõ hơn.

## Xác định màu đang nói gì với người đọc

Bắt đầu với nguồn chỉnh sửa được, chú giải hình và kích thước tái bản nhỏ nhất dự định. Liệt kê những khác biệt người đọc phải nhận ra: ký hiệu thuộc điều kiện nào, tuyến dẫn tới đâu hoặc nhãn mô tả khung nào.

Sau đó hình dung việc bỏ màu. Nếu chỉ dẫn thành “theo đường cam” hoặc “so sánh các vòng tròn xanh”, thay sự phụ thuộc đó bằng tên người đọc tìm được trong hình. Dùng tên điều kiện có ý nghĩa trong bản nộp thực tế. “Điều kiện A” và “Điều kiện B” bên dưới là tên mẫu để minh họa bố cục.

[Hướng dẫn sử dụng màu của W3C](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) yêu cầu dấu hiệu nhìn thấy như chữ hoặc hình dạng khi màu mang thông tin. Đây là hướng dẫn khả năng tiếp cận web, không phải phép thử chấp nhận của tạp chí khoa học. Cùng nguyên tắc thiết kế hữu ích ở đây: giữ sự phân biệt qua dấu hiệu khác.

## Cho mỗi điều kiện một cách nhận diện thứ hai

Dùng ít dấu hiệu nhất nhưng làm rõ ánh xạ. Nhãn ngắn cạnh mỗi tuyến có thể đủ cho sơ đồ đơn giản. Dấu lặp hoặc kiểu đường nối khác nhau có thể giúp người đọc theo tuyến dài mà không quay về chú giải.

| Điều kiện | Màu trong ví dụ | Ký hiệu  | Đường nối | Nhãn trực tiếp |
| --------- | --------------- | -------- | --------- | -------------- |
| A         | Xanh dương      | Tròn     | Liền      | Điều kiện A    |
| B         | Cam             | Tam giác | Đứt       | Điều kiện B    |

Giữ ánh xạ đó nhất quán giữa các khung. Nếu tam giác đã có nghĩa là thành phần cụ thể trong lĩnh vực của bạn, giữ ý nghĩa đó và chọn dấu hiệu khác. Tương tự, đừng dùng lại nét đứt vốn biểu thị kết nối giả thuyết cho nghĩa khác. Mã hóa dư thừa nghĩa là thể hiện cùng một danh tính bằng nhiều dấu hiệu; không phải gán ý nghĩa mâu thuẫn cho ký hiệu quen thuộc.

Chọn bảng màu hợp với đích sử dụng và giữ nhãn đọc được trên nền. [Quy định hình của Nature](https://research-figure-guide.nature.com/figures/preparing-figures-our-specifications/) yêu cầu bảng màu dễ tiếp cận và cho thấy ô chú giải màu đi cùng chữ đen. Họ cũng không khuyến khích hoa văn và trang trí rối. Điều đó ủng hộ nhãn đơn giản và ký hiệu có mục đích thay vì tô gạch mọi đối tượng.

![Minh họa so sánh hai điều kiện sơ đồ chỉ được nhận diện bằng màu với điều kiện phân biệt qua nhãn, hình dạng và kiểu đường nối](https://perfectvector.com/blog/scientific-figure-color-redundancy/condition-labels-and-shapes.webp)

*Minh họa: nhãn trực tiếp và hình dạng hoặc kiểu nét khác nhau cung cấp dấu hiệu nhận diện bên cạnh màu. Kiểm tra SVG kết xuất bên dưới dùng ví dụ riêng do chúng tôi tạo.*

## Thử SVG hai điều kiện

Lưu ví dụ đầy đủ này thành `conditions.svg`. Mở trong trình duyệt hoặc trình biên tập vector. Nó có nền trắng, hai hàng có nhãn và không có ảnh ngoài hay phông nhập. Các ký hiệu khác nhau được cố ý làm chung chung; chúng không đại diện cho cơ chế sinh học.

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="240" viewBox="0 0 600 240">
  <rect width="600" height="240" fill="white"/>
  <g fill="white" stroke-width="4">
    <g stroke="#0072B2">
      <path d="M80 70H320"/>
      <circle cx="80" cy="70" r="16"/><circle cx="320" cy="70" r="16"/>
    </g>
    <g stroke="#D55E00">
      <path d="M80 170H320" stroke-dasharray="12 8"/>
      <polygon points="80,150 62,180 98,180"/><polygon points="320,150 302,180 338,180"/>
    </g>
  </g>
  <g fill="black" font-family="sans-serif" font-size="24">
    <text x="370" y="78">Condition A</text>
    <text x="370" y="178">Condition B</text>
  </g>
</svg>
```

Nguồn giữ nhãn dưới dạng chữ. `stroke-dasharray="12 8"` cho đường nối dưới mẫu gạch và khoảng trống lặp lại; [đặc tả nét đứt SVG](https://www.w3.org/TR/SVG2/painting.html#StrokeDashing) định nghĩa cách các độ dài đó chạy theo đường dẫn. Cả nhãn lẫn tam giác không phụ thuộc vào việc nhận ra màu cam.

1. Mở bản 600 × 240. Xác nhận có cả hai nhãn, các vòng tròn thuộc A và tam giác thuộc B.
2. Xuất bản màu rồi tạo bản thang xám từ bản xuất đó. Giữ bản gốc màu. Kiểm tra bạn có nhận diện được cả hai điều kiện bằng tên và theo đường nối mà không xem mô tả màu không.
3. Tạo bản nguồn nhỏ hơn với `width="300"` và `height="120"`, giữ `viewBox` nguyên. Lặp cả hai lần xuất. Việc này kiểm tra một mức giảm, không phải kích thước tối thiểu chung.
4. Kiểm tra tệp thực sự sẽ đặt vào bản thảo hoặc trang chiếu. Xác nhận nhãn, ký hiệu và kiểu đường nối còn nguyên sau xuất và mọi thay đổi kích thước tiếp theo.

Để tạo mẫu kiểm soát cố ý yếu hơn, bỏ nhóm chữ, thay tam giác bằng vòng tròn ở cùng vị trí và bỏ `stroke-dasharray`. Nó vẫn có hai hàng màu. Câu hỏi là tên điều kiện còn có sẵn không, chứ không phải hai sắc xám có tình cờ trông giống hệt nhau không.

Chúng tôi kết xuất cả hai phiên bản bằng librsvg ở 600 × 240 và 300 × 120 pixel, rồi chuyển mỗi đầu ra sang thang xám với trọng số RGB `0.299R + 0.587G + 0.114B`. Trong cả bốn bản có dấu hiệu bổ sung, nhãn, khác biệt tròn/tam giác và đường nối liền/đứt đều nhìn thấy và không bị cắt. Xanh dương và cam của mẫu kiểm soát thành giá trị xám khác nhau, 87 và 119 trên thang 0–255. Vì thế chúng tôi không mô tả mẫu kiểm soát là không phân biệt được. Cải tiến là nhận diện điều kiện rõ ràng không phụ thuộc vào sắc màu.

Đây là kiểm tra số của SVG tự tạo này. Chúng tôi không thử bản in vật lý hoặc nghiên cứu với người đọc. Chuyển thang xám cũng không tái hiện mọi dạng khác biệt thị giác màu. Hãy coi đó là một chế độ kiểm tra, bên cạnh các kiểm tra phù hợp với độc giả và tạp chí.

## Sửa dấu hiệu không đạt ở kích thước cuối

Nếu nhãn quá nhỏ, rút gọn cẩn thận hoặc dành chỗ cho chữ lớn hơn. Nếu gạch hòa vào nhau thành đường trông liền, sửa khoảng cách gạch hoặc dùng dấu hiệu phù hợp khác. Nếu dấu mất hình dạng, đơn giản hóa hoặc tăng kích thước. Kiểm tra lại cả hình sau mỗi thay đổi để việc sửa không tạo chồng lấp ở nơi khác.

Với tính toán kích thước vật lý, dùng hướng dẫn riêng về [cỡ chữ và độ rộng nét hình khoa học](https://perfectvector.com/vi/blog/scientific-figure-font-size-line-width). Ví dụ 300 pixel trong bài này là kiểm tra kết xuất màn hình, không phải khuyến nghị chiều rộng cột tạp chí.

Giữ chú giải đồng bộ với hình. Thay “đường cam” bằng tên điều kiện và dấu hiệu nhìn thấy, chẳng hạn “Điều kiện B, đường nối đứt”. Với hình trực tuyến, cũng cung cấp văn bản thay thế hoặc chú thích phù hợp mô tả nội dung so sánh. Chỉ nhãn nhìn thấy không xác lập khả năng tiếp cận cho người không nhìn được hình.

## Giữ nguyên khoa học khi chỉnh cách trình bày

Sửa đồ thị đo trong nguồn vẽ đồ thị và xuất lại với các giá trị nền nguyên vẹn. Với ảnh hiển vi, giữ ảnh gốc và theo quy tắc xử lý ảnh của tạp chí. [Chính sách tính toàn vẹn hình ảnh của Nature](https://www.nature.com/nature/editorial-policies/image-integrity) yêu cầu ảnh cuối thể hiện dữ liệu gốc chính xác và mô tả yêu cầu công bố việc xử lý. Vẽ lại ảnh đến khi trông gọn hơn không thay thế quy trình đó.

Nếu chỉ có sơ đồ raster riêng, [quy trình sơ đồ khoa học sang SVG của PerfectVector](https://perfectvector.com/vi/scientific-diagram-to-svg) có thể giúp khôi phục hình chỉnh sửa được. Kiểm tra hình xem trước rồi mở khóa kết quả để chỉnh và xuất SVG. So sánh mọi kết nối và ký hiệu khôi phục với nguồn, dựng lại nhãn thành chữ khi cần. Hình khôi phục chỉ hữu ích nếu ý nghĩa khoa học còn nguyên. Nếu đã có hình chỉnh sửa được, sửa trực tiếp; [đổi màu SVG](https://perfectvector.com/vi/blog/how-to-change-svg-color) đề cập bước chỉnh hẹp hơn đó.

Hoàn tất khi mỗi điều kiện có tên rõ ràng, dấu hiệu phi màu vẫn đọc được trong hình đã đặt và chú giải khớp. Nếu thiếu nguồn vector đang cản trở sơ đồ riêng, [khôi phục hình bằng PerfectVector](https://perfectvector.com/vi/scientific-diagram-to-svg), rồi lặp kiểm tra nhận diện trên kết quả xuất.

## Câu hỏi thường gặp

**Bảng màu thân thiện với người mù màu có đủ cho sơ đồ khoa học không?**
Bảng màu phù hợp có ích, nhưng danh tính điều kiện cũng nên có qua nhãn trực tiếp hoặc dấu hiệu phù hợp khác. Kiểm tra toàn hình ở kích thước dự định, gồm chú giải.

**Kiểm tra thang xám có chứng minh hình dễ tiếp cận không?**
Không. Nó kiểm tra một lần kết xuất không có sắc màu. Nó không bao quát mọi khác biệt thị giác màu, thị lực kém, truy cập trình đọc màn hình hay yêu cầu của tạp chí cụ thể.

**Tôi có nên đổi mọi ký hiệu khoa học thành tròn và tam giác không?**
Không. Ví dụ dùng ký hiệu mẫu chung. Giữ các ký hiệu và kiểu nét đã có ý nghĩa khoa học, thêm nhãn hoặc dấu hiệu tương thích khác.

## Nguồn tham khảo

1. [W3C — Hiểu việc sử dụng màu](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) — Giải thích phương án nhìn thấy thay cho màu và giới hạn của tiêu chí tiếp cận này.
2. [Nature — Chuẩn bị hình: quy định của chúng tôi](https://research-figure-guide.nature.com/figures/preparing-figures-our-specifications/) — Cung cấp hướng dẫn bảng màu, chữ chú giải và độ rối được dẫn cho hình Nature.
3. [W3C — Nét đứt SVG](https://www.w3.org/TR/SVG2/painting.html#StrokeDashing) — Định nghĩa mẫu gạch và khoảng trống dùng trong ví dụ nguồn đầy đủ.
4. [Nature — Tính toàn vẹn và tiêu chuẩn hình ảnh](https://www.nature.com/nature/editorial-policies/image-integrity) — Đặt ranh giới dữ liệu nguồn và xử lý làm cơ sở cho hướng dẫn ảnh khoa học.

## Explore

- [Read the HTML article](https://perfectvector.com/vi/blog/scientific-figure-color-redundancy)
- [Cách tạo logo một màu mà không mất thiết kế](https://perfectvector.com/vi/blog/one-color-logo-negative-space.md)
- [Biểu tượng SVG Shopify tùy chỉnh: Chuẩn bị biểu trưng thương hiệu sạch](https://perfectvector.com/vi/blog/shopify-custom-svg-icon.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)